Even by default the crossOrigin is set to anonymous, and the images stored in my AWS S3 is allowed for every request from any origin, still I am getting this error while using Texture Loader.
When the initiator for the image request is three.js module, it ends up in the CORS error, while it is returned successfully when the initiator of the request is my React application page (explore-timeline page)
This case doesn’t appears when I hard refresh the page, but when I run it for the first time in my React Application and subsequent soft reloading until I do hard refresh and it then caches the requested images. Can you tell me what’s the exact issue with it?
Three.js version
Browser
- All of them (Chrome, Firefox, Internet Explorer)
OS
- All of them (Windows, macOS, Linux )
If the CORS headers are not present in the HTTP response, something is wrong with your backend configuration. In any event, this is not a three.js or client-side related issue in general.
I suggest you ask at the AWS support for help.
Hey my solution is…
- Use Google Firebase hosting (free but there’s a bandwidth limit everyday)
- Set up everything: install Firebase, put your images to the folder (default is
public),
- Modify the file: firebase.json. If it was your first time to edit that you can just copy my code
{ "hosting": { "public": "public", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ], "headers": [ { "source": "**/*.@(jpg|jpeg|gif|png)", "headers": [ { "key": "Access-Control-Allow-Origin", "value": "*" } ] } ] } }
- Run
firebase deploy !
- And you may get a xxx.web.app url, trying to find the image’s url.
- Use these image’s url in your three.js, don’t for get to write this code, too.
img.crossOrigin = "";
Ref. links
https://firebase.google.com/docs/hosting/full-config#headers
You have to understand that the CORS behavior is not an error — it’s a mechanism that’s working as expected in order to protect your users, you, or the site you’re calling. If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. In this case you need to enable your service for CORS which is cross origin resource sharing.
If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.
If you need to enable CORS on the server in case of localhost, you need to have the following on request header.
Access-Control-Allow-Origin: http://localhost:9999
