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

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.

Solution

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