In this post, we will see how to resolve CORS error on some GET requests, but not all?
Question:I have a configurator that I am able to change size and color of a piece of furniture using Google’s . I have it working great on localhost, but for some reason, when deploying my MERN project to Heroku, I keep getting CORS errors when I go to swap the materials? I am able to GET some of the textures no problem, but other’s I’m getting the CORS error.
All materials/images come from the same S3 bucket, and has the correct CORS policy on AWS. And in my Server.js file I have
app.useCors(());middleware installed. Really confused as to why I can GET some items, but not all from the same S3 bucket.
The CORS error in example:
Access to image at 'https://scoutmaterials.s3.us-east-2.amazonaws.com/Lacquer/Lacquer_Nrm.jpg' from origin 'https://fathomless-brook-11892.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have it set up to where when a user “clicks” on a label it will then fire an event to “swap” the materials.
Here is the swatch layout (the images in value, data-value, data-value2 are the images I’m getting from the S3 bucket):
Here is the swapping code:
And finally my Server.js code, with the added cors() middleware:
Best Answer:@jub0bs lead me in the right direction. After digging around some more I found out that simply changing these values:
If you have better answer, please add a comment about this, thank you!