CODEWITHSUNDEEP
javascriptamazon-s3cachingcorsnext.js
guyyug
guyyug

Reputation: 1087

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

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.net/assets/_next/static/css/b1a6e8370451b02b15e6.css' from origin 'https://example.com' 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.

Upvotes: 6

Views: 7434

Answers (2)

untanglinginthedark
untanglinginthedark

Reputation: 1

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

enter image description here

Upvotes: 0

guyyug
guyyug

Reputation: 1087

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.org/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

Upvotes: 9

Related Questions