Skip to content
Advertisement

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:

JavaScript

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.

Advertisement

Answer

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

JavaScript

Also, make sure you set S3 CORS permissions to:

JavaScript

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

JavaScript

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

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement