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

### 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](https://user-images.githubusercontent.com/15630854/153590466-6e5be983-a728-4337-aff9-f15521f3f667.png)

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](https://user-images.githubusercontent.com/15630854/153609811-b07a4b2e-36b9-4868-9862-73679867f639.png)




### 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

1. Change `assetPrefix` in next.config.js to some cdn url that is using as source a s3 bucket
2. 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

1. 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
2. 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)