Issue with CORS on Next.js static files leading to broken links on version 10.1.4

Currently, my Nextjs application is fetching its static files from Cloudfront. During deployment, I upload the /static folder to S3.

After updating to version 9, I encountered a strange problem where some of my CSS files are triggering a 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.

Upon upgrading Nextjs to version 10.1.4, all the links in the app suddenly stopped working. This issue seems to be related to CORS because everything worked fine when deployed without CDN.

Both S3 and Cloudfront have CORS requests enabled, but I am still experiencing problems.

Any assistance would be greatly appreciated.

javascriptamazon-s3cachingcorsnext.js

Answer №1

Through extensive research, I stumbled upon a handy Nextjs prop that ensures all tags have the cross-origin attribute.

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

Additionally, remember to configure S3 CORS permissions as follows:

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

Moreover, add Cloudfront Behavior Settings to whitelist these headers: (Under Behaviors -> Edit -> Whitelist Headers)

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

Check out this feature blog post: https://nextjs.org/blog/next-8#new-crossorigin-config-option

Dive into an interesting discussion on this topic here: Caching effect on CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to directly update the label text in AngularJS from the view itself?

I found the following code snippet in my HTML <span ng-class="newProvider ? 'newProvider' : ''" class="help-block"> {{ 'new-product.provider.helper' | locate }} </span> Whenever newProvider is se ...

javascriptangularjs

Leveraging Typekit / Adobe Fonts with @next/font

The current Next.js Font Optimization documentation and the @next/font API Reference provide instructions on incorporating Google Fonts and local font files, however; they do not mention the recommended approach for implementing Typekit / Adobe Fonts. Wha ...

next.jstypekit

I'm curious if it's possible to utilize Raspberry Pi GPIO pins within a JavaScript frontend

Is it possible to utilize Raspberry Pi's GPIO pins in Javascript? Specifically, I am interested in reading the values of the Raspberry Pi PIR sensor without having separate Python and Javascript applications. Ideally, I would like a solution that inte ...

javascriptnext.jsraspberry-pigpio

storing audio files locally with Vue.js

Looking for a way to store a sound locally for my Battleship game rather than referencing it on the internet. Here's the code that triggers the sound: @click.prevent="fireSound('http://soundbible.com/grab.php?id=1794&type=mp3')" I atte ...

javascriptvue.js

Issues with ng-repeat causing the Angular Editable table to malfunction

<table class="table table-bordered"> <tbody> <tr ng-repeat="playerOrTeam in template.editableTable track by $index"> <td style="text-align: center;" ng-repeat="playerOrTeamCat in playerOrTeam track by $index"> ...

javascriptangularjs

Load suggestions from Material UI AutoComplete dynamically based on user input

I am facing a challenge with an Autocomplete component that needs to handle a large data list, up to 6000 elements, and display suggestions based on user input. Due to the sheer number of options, when a user types on a slower computer, there is a noticeab ...

javascriptreactjsinputautocompletematerial-ui

Obtaining the referring URL after being redirected from one webpage to another

I have multiple pages redirecting to dev.php using a PHP header. I am curious about the source of the redirection. <?php header(Location: dev.php); ?> I attempted to use <?php print "You entered using a link on ".$_SERVER["HTTP_REFERER"]; ?> ...

phpjavascripthtml

Encountering a TypeError when trying to start the nextjs server

Every time I run my next server with npm run dev, I keep encountering the same error. After testing it on a fully functional project, I am convinced that the issue is not related to the code. I suspect that the problem may be caused by running: npm insta ...

node.jsreactjsnpmnext.js

Exploring the foundations of web development with html and stylus

If you have experience with the roots platform, you are familiar with its default stack including jade, stylus, and coffee script. The documentation provides some information on using HTML, CSS, and pure JavaScript instead of the compiled languages, but d ...

javascripthtmlworkflowstylusroots-toolkit

Retrieve the element that is currently being hovered over within the same nested selector

I am facing a challenge in selecting the currently hovered element with a nested selector. The ".frmElement" class is used as the selector. When I hover over the ".frmElement" element at a certain level, all the previous selector elements display the hover ...

javascriptjqueryhtmlcss

The AngularJS array data is not displaying correctly

I am having trouble displaying comments array data in HTML properly. The data appears the same as it is in the comments array. What could be causing this issue? How should I proceed? <ul class="media-list" ng-controller="dishDetailController as menuCt ...

javascriptangularjs

What is the trick to incorporating nested tabs within tabs?

My tabs are functional and working smoothly. To view the jsfiddle, click here - http://jsfiddle.net/K3WVG/ I am looking for a way to add nested tabs within the existing tabs. I would prefer a CSS/HTML solution, but a JavaScript/jQuery method is also acce ...

javascriptjqueryhtmltabs

Node.js - updating the value of a exported integer variable

In my file A.js, I have defined a module-level variable called activeCount and exported it using module.exports. In another file named testA.js, I am attempting to access and modify the value of activeCount. Despite my efforts, changes made to activeCount ...

javascriptnode.js

What is the best way to access req.query in a Next.js API?

Struggling with retrieving the query passed in the URL for this particular API. Despite passing queries like products?page=1&limit=10, I am only getting an empty object as a response const handler = nc().use(Cors()); handler.get(async (req, res) => ...

node.jsapinext.js

How to define an index signature in Typescript that includes both mandatory and optional keys

I am on a quest to discover a more refined approach for creating a type that permits certain keys of its index signature to be optional. Perhaps this is a scenario where generics would shine, but I have yet to unlock the solution. At present, my construc ...

javascripttypescripttypesindex-signature

Guide on transforming UTC time from the server to the local time of users during a GET request

I am currently facing a challenge where I need to verify if the date of the last time an element was clicked matches the current date. Due to my server generating the current date which is 5 hours ahead of my local time, there is a discrepancy causing the ...

javascriptmongodbexpressdate

Refreshing a page in Next.js causes query parameters to disappear

I am facing an issue with routing between two components and passing data from the first to the second without sending the parameter in the URL. The problem arises when I refresh the page and the query params are lost. <p className={styles.jobname}& ...

javascriptreactjsnext.jsquery-stringdynamic-routing

"Implementing a column template in jqgrid post-creation: A step-by-step

Can't apply column template with Free jqgrid once it's been created. I've attempted: var newOrderPriceTemplate = { align: "center", formatter: "showlink", formatoptions: { onClick: function() { alert('clicked&apos ...

javascriptjqueryasp.net-mvc-4jqgridfree-jqgrid

Deploying to AWS S3 without the need to update or modify any

Just a heads up - this is not an EC2 instance I have developed a node.js application to handle requests for images by using app.use("/images", s3Proxy({...})). These images are stored in my AWS S3 bucket and then served. I am uploading images to the bucke ...

node.jsamazon-web-servicesexpressamazon-s3

Tips for passing two parameters to an event in JavaScript

I'm a bit confused on how to send 2 parameters for event listening in JavaScript and Vue.js. I am trying to edit input data when the keyup event is equal to 13 (enter), but I am unsure of how to send the event along with the value. When I try to send ...

javascriptvue.js