I’m working with a service worker in Angular that fetches JavaScript files from another domain.

I noticed that the service worker doesn’t cache these files, and in the response type column, it shows as “cors”.

I’m puzzled by this because when I run the curl command, the files are returned with Access-Control-Allow-Origin: * headers.

What could be causing the service worker to detect these files as “cors”? I believe the Angular service worker uses the native fetch function from the browser.

Here’s the curl command output for reference:

curl -I https://cdn.example-1.com/**/chunk-*******.js

HTTP/1.1 200 OK
Content-Type: application/javascript
Content-Length: 3346
Connection: keep-alive
Date: Sun, 26 May 2024 18:49:54 GMT
X-Amz-Replication-Status: COMPLETED
Last-Modified: Sun, 26 May 2024 17:51:26 GMT
Etag: "f3a**************************fd5"
X-Amz-Server-Side-Encryption: AES256
X-Amz-Version-Id: 3K7V_pq4R*******bj5G_rn
Accept-Ranges: bytes
Server: AmazonS3
Vary: Accept-Encoding
Via: 1.1 ***************.cloudfront.net (CloudFront)
Age: 13
X-Xss-Protection: 1; mode=block
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000
Vary: Origin
Access-Control-Allow-Origin: *
Content-Security-Policy: frame-ancestors 'none'
X-Cache: Hit from cloudfront
X-Amz-Cf-Pop: TLV50-C2
X-Amz-Cf-Id: ******

What might be the issue with the service worker handling these files as CORS?