CORS requests falen in service worker op localhost

[egonolieux]

Ik heb een service worker waarin ik met Workbox een hoop asset URLs precache. Deze asset URLs bevinden zich op een ander domein dan de service worker (CDN), en zijn dus cross origin requests.

Dit werkt allemaal prima eens in productie, maar vanaf localhost er bij komt kijken in mijn development omgeving lijkt het helemaal fout te lopen.

Bij het installeren van de service worker, loopt het precachen vast op CORS errors. Chrome zegt dat er geen "Access-Control-Allow-Origin" header aanwezig is in de response van de server. In dit geval is de server simpelweg een publieke S3 bucket met de volgende CORS policy:

code:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Alle tests met Postman en Chrome console tonen mij dat de juiste CORS headers aanwezig zijn, en de requests slagen dan ook zonder problemen. Vreemd.

Na wat verder testen met de service worker blijkt dat niet per se alle precache requests falen, sommige requests slagen zonder enige problemen. Voor alle duidelijkheid: dit zijn requests die niet eerder gecached zijn, dus daar kan het niet aan liggen:





Verder heb ik ook het volgende patroon kunnen vaststellen: Als een precache request faalt, dan faalt dezelfde request manueel vanuit de console ook. Als er eerder geen precache request gebeurd is voor een specifieke URL, dan lukt het wel gewoon manueel vanuit de console. De browser cache wissen, zorgt er voor dat alle falende requests gewoon terug manueel lukken:



Mis ik hier iets? Zijn er andere regels voor CORS binnen service workers? Tot zo ver ik weet zou localhost geen invloed mogen hebben op cross origin requests, toch?

[RedFox]

Kan je de headers van de requests die falen vergelijken met degene die wel werken? Als de ene het wel doet en de andere niet zal er iets anders moeten zijn qua request/response.

[Juup]

localhost en 127.0.0.1 worden wel speciaal behandeld in de browsers.
En het verandert ook in de loop van de tijd.

Hoe zorg je nu voor https/tls op je localhost?
Of gebruik je http?

[egonolieux]

RedFox schreef op woensdag 1 maart 2023 @ 21:31:
Kan je de headers van de requests die falen vergelijken met degene die wel werken? Als de ene het wel doet en de andere niet zal er iets anders moeten zijn qua request/response.

Een van mijn eerste vermoedens was dat de "Origin" header niet gestuurd werd wetende dat sommige servers enkel ACAO headers sturen als deze header aanwezig is, maar het lijkt er op dat er helemaal niets verstuurd wordt:



De response is OK (200), maar de request headers zijn weggelaten alsof het gaat om een gecachte request. Nochtans staat "cached from memory/disk" er niet bij.

Hier is exact dezelfde request die wel slaagt:

Juup schreef op woensdag 1 maart 2023 @ 21:42:
localhost en 127.0.0.1 worden wel speciaal behandeld in de browsers.
En het verandert ook in de loop van de tijd.

Hoe zorg je nu voor https/tls op je localhost?
Of gebruik je http?

Ik gebruik HTTPS met een self-signed certificaat.

[Verwijderd]

In je request header staat een origin, die heb jij op een wildcard staan. Er is nog een request, de options request, wordt deze wel verstuurd, weet niet zeker of je die moet toevoegen. Ik kan je mijn config in mijn framework even geven.

JSON:

"cors": {
            "headers": {
                "expose": [
                    "Cache-Control",
                    "Content-Language",
                    "Content-Length",
                    "Content-Type",
                    "Expires",
                    "Last-Modified",
                    "Pragma"
                ],
                "allow": [
                    "Origin",
                    "Cache-Control",
                    "Content-Type",
                    "Authorization",
                    "X-Requested-With"
                ]
            },
            "domains": [
                ...
            ],
            "allow_credentials": true,
            "max-age": 86400,
            "methods": [
                "GET",
                "POST",
                "PATCH",
                "PUT",
                "DELETE",
                "OPTIONS"
            ]
        }

[RedFox]

Misschien eens met Fiddler oid er tussen testen? Dan kan je precies zien wat er over de lijn gaat en de mislukte request vergelijken met degene die wel lukt.

Ik kom hier een soortgelijk probleem tegen, maar daar lijkt het wel aan caching te liggen: https://stackoverflow.com...imes-result-in-cors-error

[Woy]

egonolieux schreef op woensdag 1 maart 2023 @ 22:04:
Ik gebruik HTTPS met een self-signed certificaat.

Wordt het certificaat dan wel geaccepteerd binnen de service worker? Heb je deze in je trusted certificates gezet?