CSS and JS files being blocked by CORS policy when using 'output: "export"'
Unanswered
Sloth bear posted this in #help-forum
Sloth bearOP
When running my static project by opening the index.html file I get an error in the console as shown by the image attached. This happens for every file trying to be retrieved from the HTML. In the index.html file the link looks like this:
Is there any extra config that needs to be applied to solve this issue? I am confused as to why this is happening in the first place.
For extra info, I know that the files exist and the paths are valid.
If the image doesn't display, here is the error in text:
Access to CSS stylesheet at 'file:///_next/static/css/021113ccca6e2435.css' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, isolated-app, brave, https, chrome-untrusted, data, chrome-extension, chrome.
<link
rel="stylesheet"
href="/_next/static/css/021113ccca6e2435.css"
crossorigin=""
data-precedence="next"
/>Is there any extra config that needs to be applied to solve this issue? I am confused as to why this is happening in the first place.
For extra info, I know that the files exist and the paths are valid.
If the image doesn't display, here is the error in text:
Access to CSS stylesheet at 'file:///_next/static/css/021113ccca6e2435.css' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, isolated-app, brave, https, chrome-untrusted, data, chrome-extension, chrome.
11 Replies
@Ray you need to host it with a web server or use `npx serve@latest out` on your machine
Sloth bearOP
Thank you, this fixes the problem on my local machine. However, I had to rebuild my app statically due to a client wanting it to be hosted on a SCORM platform. It seems to be an old-school kind of system that will run an app by simply opening the root html file. This means that I can't use npx serve@latest out which is unfortunate.
Is there a way that I can change features of the exported html files? For example if I manually remove the crossorigin attribute and change the file path from
things are applied correctly
Is there a way that I can change features of the exported html files? For example if I manually remove the crossorigin attribute and change the file path from
"/_next/static/css/021113ccca6e2435.css" to "./_next/static/css/021113ccca6e2435.css"things are applied correctly
@Sloth bear Thank you, this fixes the problem on my local machine. However, I had to rebuild my app statically due to a client wanting it to be hosted on a SCORM platform. It seems to be an old-school kind of system that will run an app by simply opening the root html file. This means that I can't use npx serve@latest out which is unfortunate.
Is there a way that I can change features of the exported html files? For example if I manually remove the crossorigin attribute and change the file path from `"/_next/static/css/021113ccca6e2435.css"` to `"./_next/static/css/021113ccca6e2435.css"`
things are applied correctly
try to set a assetPrefix in next.config to ./
It should fix css issue but image may not work
It should fix css issue but image may not work
maybe you could try to use something like electron or tauri to build a shell to load the html
@Ray try to set a assetPrefix in next.config to ./
It should fix css issue but image may not work
Sloth bearOP
Thanks for the help. It's a pain that I cannot get rid of the crossorigin default of "anonymous" but this gets me a lot closer to the solution
@Ray does it work for you?
Sloth bearOP
Yes, the above works to load the CSS files from the correct path but I still have to remove the crossorigin attributes manually in the html files
@Ray oh ok
Sloth bearOP
Thanks for your time 🙂
np