I'm trying to fetch a JavaScript file from another domain using the following code:
const r = await fetch('https://example.com/js/chunk-99EP6AU.js');
console.log({ r });
The response has a type of cors
. Does this mean the file is being blocked due to CORS restrictions?
When I use the curl
command to check the headers, I see that the file is served with the Access-Control-Allow-Origin: *
header:
curl -I https://example.com/js/chunk-99EP6AU.js
HTTP/1.1 200 OK
Content-Type: application/javascript
Content-Length: 1750
Connection: keep-alive
Date: Mon, 27 May 2024 08:15:03 GMT
X-Amz-Replication-Status: COMPLETED
Last-Modified: Thu, 23 May 2024 16:37:11 GMT
Etag: "***********************"
X-Amz-Server-Side-Encryption: AES256
X-Amz-Version-Id: ******.4NfhX3z
Accept-Ranges: bytes
Server: AmazonS3
Vary: Accept-Encoding
Via: 1.1 *********************.cloudfront.net (CloudFront)
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: -NHmjcimBl39K3VgvBg9s2d**********D9Nw==
Despite the Access-Control-Allow-Origin: *
header, why might there still be an issue with CORS?
The response has a type of cors. Does this mean the file is being blocked due to CORS restrictions?
No it means that the resource can be shared across different origins. CORS means Cross Origin Resource Sharing.
The Response
is successful. Its status
code is 200 and its statusText
is "OK"
. You can go ahead and use the Response
.
If the Header
of the Response
has a key; Content-Type
with value; text/javascript
, read the Response
like so:
const response = await fetch("https://example.com/js/chunk-99EP6AU.js")
const javascript = await response.text()
console.info("The Javascript as string: ", javascript)