Question

Droplet "has been blocked by CORS policy: No 'Access-Control-Allow-Origin'" Error

I have deployed my website for some time and it worked well. But today I find it not loading with an “Access to fetch at ‘https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/potsdamer-platz/potsdamer_platz_1k.hdr’ from origin https://lkhovo.me 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.” Error.

I asked gpt and edited the etc/nginx/site-available/digitalocean file. edited the server section to add the following lines:

location / {
add_header Access-Control-Allow-Origin https://lkhovo.me; 
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range"; 
add_header Access-Control-Expose-Headers "Content-Length,Content-Range"; 
}

but still not working

What should I do?


Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bobby Iliev
Site Moderator
Site Moderator badge
June 8, 2023
Accepted Answer

Hi there,

As you are using the DigitalOcean Spaces for your static assets, you need to also configure your CORS in your Spaces settings rather than the Nginx configuration that GTP has suggested.

You can do that by following the steps here:

https://docs.digitalocean.com/products/spaces/how-to/configure-cors/

Update:

Solved running a npm update and deploy again

Let me know how it goes!

Best,

Bobby

It has nothing to do with your website or sever or your CORS settings - the guys from Three.js and Fiber and so messed up - the server where the Envirenment Image (city, wood, studio…) was hosted is blocking any request - you should anyways not use that in production but rather use your own image.

I’m seeing the same error with the exact same url. It was working before but recently stopped working. It’s failing when I’m trying to render my ThreeJS scene.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more