next.js: ^11.1.2 - Using cdn for assets results in CORS error only for some css files not all

Run `next info` (available from version 12.0.8 and up)

“next”: “^11.1.2”,

What version of Next.js are you using?

“next”: “^11.1.2”,

What version of Node.js are you using?

15.0.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start in aws

Describe the Bug

I am deploying my nextjs application in a single ec2 instance in aws. I deploy the next assets _next/static in a s3 bucket, and they are served via cloudfront

in next.config.js i put correctly assetPrefix to my cdn: NOTE: I replaced client domain with domain.com for privacy reason, everything else is documented with real data from the bug scenario.

assetPrefix:: 'https://cdn.dev.domain.com'

The above config works fine, on deployment app tries to get files from cdn and works for 95 % of js/css.

Issue is that I get cors error for only some CSS which is crazy!

Most of page deployed works fine can load js/css in my cdn _next/static folder, but some css fail and this causes particular routes not to load!!! and user face silent errors

screenshoot of network tab Screenshot 2022-02-11 at 13 19 38

shows that some css are loading some no. .js files load fine from the cdn. My domain is allowed in s3 bucket cors policies and is getting files correctly most of them I mean, as some css don’t load.

Error in console is

Access to fetch at 'https://cdn.dev.domain.com/_next/static/css/dfed990485bdfd23f3fe.css' from origin 'https://web.dev.domain.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.

I notice that for working css fetches, next sends cors headers correctly. I copied one chrome network request as curl and post below, that is working fine.

  curl 'https://cdn.dev.domain.com/_next/static/css/ffe628ef00744e353e72.css' \
  -H 'authority: cdn.dev.domain.com' \
  -H 'pragma: no-cache' \
  -H 'cache-control: no-cache' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'accept: */*' \
  -H 'origin: https://web.dev.domain.com' \
  -H 'sec-fetch-site: same-site' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'referer: https://web.dev.domain.com/' \
  -H 'accept-language: en-US,en;q=0.9' \
  --compressed

other times I see the cors error in network tab and this requst type ( no cors headers at all added by next load initiator somewhere at main-70dd238….js:1) Below request in screenshoot resulted in CORS error that I posted above

Screenshot 2022-02-11 at 15 27 41

Expected Behavior

NextJS should be consistent, if it manages to load all js files and 95% of css over CDN , while sending same request headers I expect everything to work fine load all route assets 100% correctly and avoid silent errors like this.

To Reproduce

Change assetPrefix in next.config.js to some cdn url that is using as source a s3 bucket
upload .next/static to one s3 bucket _next/static

yarn build && yarn start the next app in a domain that is subdomain of the cdn domain. S3 bucket allows the website domain as CORS origin

What I tried already

in next.config.js I added crossOrigin: 'anonymous', after a lot of online reasearch. Then build deployed and started, unfortunately did not help. Actually cors was broken totally after this change no asset could be loaded
Solution provided here https://github.com/vercel/next.js/issues/21513#issuecomment-768255348 to change cloudfront s3 origin to add header origin *. Tried and did not work (after invalidating all cache of course, also with uploading assets to new folder as well)

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 8
Comments: 26 (2 by maintainers)

Most upvoted comments

I believe this is not next js issue. It is CDN configuration. You need to add the CDN header to add “Access-control-allow-origin” header.

Note: Using * for simplicity.

access-control-allow-origin: *

if you are using the AWS cloudfront you can go to to cloudfront ->Behaviors -> Response headers policy -> SimpleCors

Good luck

+10

drgx on Jun 7, 2022

I believe this is not next js issue. It is CDN configuration. You need to add the CDN header to add “Access-control-allow-origin” header.

Note: Using * for simplicity.
access-control-allow-origin: *
if you are using the AWS cloudfront you can go to to cloudfront ->Behaviors -> Response headers policy -> SimpleCors

Good luck

Your suggestion is a workaround to the problem which forces a header from CDN, but this is not ideal. If CDN was the root cause, then why rolling back to old Next version solves the problem?

As multiple people mentioned, they have not changed their CDN configuration and this issue came up after upgrader. Hence the skepticism about it being a bug.

aryanet on Nov 9, 2023

@ild0tt0re any news on your PR? Is there a way to get around this issue without your fix? We are also having this issue…

No, please upvote it here #58200

In the meantime you can use patch subcommand of your package manager like pnpm patch next@version

ild0tt0re on Nov 29, 2023

This may be a separate bug, but at least related: I’ve encountered the same CORS issue as described above - next app is hosted on stitchfix.com, assets are on assets.stitchfix.com. I see a read from disk, and then a CORS error for the same .css asset initiated from javascript: This looks to be here: https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L1853

The behavior I then see is an infinite refresh of the current page. I’m guessing this is happening a few lines later (isAssetError): https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L1868-L1880

It’s additionally perplexing because I see this which supposedly should prevent a navigation to the same URL: https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L639-L645

This all started with the introduction of a middleware. I’m not sure if next thinks middleware should run on this asset request, even though it is from a different (sub-)domain.

It seems like a bug. Any solution?
// next.config.js
module.exports = { crossOrigin: "anonymous" }

This issue seems to have been fixed in some latest version: https://github.com/vercel/next.js/blob/08e5424ddce3dd5a53115fc93cb5d088f6b56b99/packages/next/src/export/index.ts#L486

in 11.1.4 https://github.com/vercel/next.js/blob/75b7a57e0f0044d9315eb6adbd4231b67799d0b1/packages/next/build/webpack-config.ts#L683

y122972 on Nov 14, 2023

This may be a separate bug, but at least related:

I’ve encountered the same CORS issue as described above - next app is hosted on stitchfix.com, assets are on assets.stitchfix.com. I see a read from disk, and then a CORS error for the same .css asset initiated from javascript:

Screenshot_2023-08-31_at_4_19_10_PM

This looks to be here: https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L1853

The behavior I then see is an infinite refresh of the current page. I’m guessing this is happening a few lines later (isAssetError): https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L1868-L1880

It’s additionally perplexing because I see this which supposedly should prevent a navigation to the same URL: https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L639-L645

This all started with the introduction of a middleware. I’m not sure if next thinks middleware should run on this asset request, even though it is from a different (sub-)domain.

joekur on Aug 31, 2023

We are having the same issue but with multiple 3rd party vendors. It’s kind of difficult to reach out to all the vendors and tell them to fix their CDN settings. This should be something we can control in the Next config somehow.

antho1jp on Aug 17, 2023

This may be a separate bug, but at least related: I’ve encountered the same CORS issue as described above - next app is hosted on stitchfix.com, assets are on assets.stitchfix.com. I see a read from disk, and then a CORS error for the same .css asset initiated from javascript: This looks to be here: https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L1853

The behavior I then see is an infinite refresh of the current page. I’m guessing this is happening a few lines later (isAssetError): https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L1868-L1880

It’s additionally perplexing because I see this which supposedly should prevent a navigation to the same URL: https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L639-L645

This all started with the introduction of a middleware. I’m not sure if next thinks middleware should run on this asset request, even though it is from a different (sub-)domain.

It seems like a bug. Any solution?

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

y122972 on Nov 9, 2023

This may be a separate bug, but at least related:

I’ve encountered the same CORS issue as described above - next app is hosted on stitchfix.com, assets are on assets.stitchfix.com. I see a read from disk, and then a CORS error for the same .css asset initiated from javascript:

This looks to be here:

https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L1853

The behavior I then see is an infinite refresh of the current page. I’m guessing this is happening a few lines later (isAssetError):

https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L1868-L1880

It’s additionally perplexing because I see this which supposedly should prevent a navigation to the same URL:

https://github.com/vercel/next.js/blob/cc775795890ae9d9587ee978e3573dc94877b1ad/packages/next/src/shared/lib/router/router.ts#L639-L645

This all started with the introduction of a middleware. I’m not sure if next thinks middleware should run on this asset request, even though it is from a different (sub-)domain.

It seems like a bug. Any solution?

y122972 on Nov 8, 2023

I believe this is not next js issue. It is CDN configuration. You need to add the CDN header to add “Access-control-allow-origin” header.

Note: Using * for simplicity.
access-control-allow-origin: *
if you are using the AWS cloudfront you can go to to cloudfront ->Behaviors -> Response headers policy -> SimpleCors

Good luck

This configuration was already there in my case but didn’t working at all. So I created a custom policy to allow all origins and few methods. This helped fixing the issue.

vinodmmm on Jul 6, 2023

Any luck for this? I meet the same issue when I upgrade nextjs to version 13

----update-----

In my case, we use Heroku add on EDGE for CDN Screenshot 2023-02-28 at 16 09 54 After click the Invalidate button and add (access-control-allow-origin: *), it works

Lumuy on Feb 28, 2023