Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CORS error fetching external CSS on 9.5.3

See original GitHub issue

Bug report

Describe the bug

After upgrading to next@9.5.3, the initial load of our page throws when requesting CSS from our CDN.

To Reproduce

Create an app with a stylesheet, css or scss.
Import that stylesheet into a component as a module.
Build and upload your assets to a CDN using assetPrefix in next.config.js. Deploy your app and run in production mode.
Notice that your initial page load throws with a CORS error.

Expected behavior

Preloading css should work cross domain or it should fail gracefully.

Screenshots

Developer Tools:

Elements View:

System information

OS: [e.g. macOS, Windows]
Browser: chrome
Version of Next.js: 9.5.3
Version of Node.js: 10

Additional context

I believe it’s related to this PR: https://github.com/vercel/next.js/pull/16581#issuecomment-691362392

Issue Analytics

State:
Created 3 years ago
Reactions:16
Comments:33 (11 by maintainers)

Top GitHub Comments

20reactions

sophiekoonincommented, Oct 30, 2020

We’ve had some success by discovering an undocumented prop that can be passed into <Head> in a custom document - make sure that it is the Head from next/document.

You can pass in the crossOrigin prop with a value of either anonymous or use-credentials (see relevant MDN). The fetch was successful 👍

edit: just found out that is deprecated - apparently you can add it in next.config.js instead - see relevant error

10reactions

insidecommented, Sep 21, 2020

Hi 👋

Same issue here too. Downgrading to v9.5.2.

Top Results From Across the Web

Cannot Access cssRules for Stylesheet CORS - Stack Overflow

So I've been reading that you can't access cssRules for external stylesheets because it runs into CORS policy ...

Don't Snore on CORS - CSS-Tricks

Meaning if I, at css-tricks.com , try to fetch some JavaScript from an external URL, like any-other-website.com , the browser will just stop...

html-standard.pdf

1.11.2 Syntax errors . ... 4.2.4.3 Fetching and processing a resource from a link element . ... 4.16 Matching HTML elements using selectors...

Voice Browser Call Control: CCXML Version 1.0 - W3C

This event is thrown once the document is parsed and ready for execution (document initialization occurs between the fetched and loaded events). The...

Fixing Common Problems with CORS and JavaScript

The solution to the issue is for the server to set a response header that allows the browser to make cross-domain requests to...