javascript - Nextjs static files CORS issue - Causing links to break on version 10.1.4 - Stack Overflow

admin管理员组

文章数量:1287800

My current Nextjs app is pulling its static files from Cloudfront. (I upload the /static folder to S3 during the deployment)

Since updating to version 9 I am facing a weird issue where some of my CSS files are getting the following CORS error:

Access to fetch at '.css' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

After updating Nextjs to version 10.1.4, all the links of the app stopped working. This is related to the CORS issue because when I deployed without CDN everything worked fine.

Both S3 and Cloudfront are set up to accept CORS requests.

Any help will be appreciated.

My current Nextjs app is pulling its static files from Cloudfront. (I upload the /static folder to S3 during the deployment)

Since updating to version 9 I am facing a weird issue where some of my CSS files are getting the following CORS error:

Access to fetch at 'https://xxx.cloudfront/assets/_next/static/css/b1a6e8370451b02b15e6.css' from origin 'https://example.' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

After updating Nextjs to version 10.1.4, all the links of the app stopped working. This is related to the CORS issue because when I deployed without CDN everything worked fine.

Both S3 and Cloudfront are set up to accept CORS requests.

Any help will be appreciated.

• javascript
• amazon-s3
• caching
• cors
• next.js

Share Improve this question Follow edited Jun 24, 2021 at 21:55 guyyug asked Jun 24, 2021 at 21:41 guyyugguyyug 1,08711 gold badge1212 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

After a lot of research I discovered the following Nextjs prop which makes sure all the tags have the cross-origin attribute.

// next.config.js
module.exports = {
  crossOrigin: 'anonymous'
}

Also, make sure you set S3 CORS permissions to:

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

And add Cloudfront Behavior Settings to whitelist the following headers: (Under Behaviors -> Edit -> Whitelist Headers)

Access-Control-Request-Headers
Access-Control-Request-Method
Origin

Feature blog post: https://nextjs/blog/next-8#new-crossorigin-config-option

Interesting discussion about this topic: Caching effect on CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource

What worked for me in the latest AWS with Cloudfront is to choose the "CORS-with-preflight" response header policy.

enter image description here

本文标签： javascriptNextjs static files CORS issueCausing links to break on version 1014Stack Overflow