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

Questions
1

Hi, everyone, the Three.js and Fiber server where the Envirenment Image to my website (city, wood, studio…) , was hosted is blocking any request:

error Access to fetch at ‘https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/potsdamer-platz/potsdamer_platz_1k.hdr’ from origin ‘http://localhost:3000’ 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.

index-bb759d07.esm.js:1624 Uncaught Error: Could not load potsdamer-platz/potsdamer_platz_1k.hdr: Failed to fetch) at Object.onError (index-bb759d07.esm.js:1624:36) at three.module.js:41335:39

maybe there is for solution for this?..thanks

1 Like
2

sure, download potsdamer_platz_1k.hdr and place it in your localhost:3000 webserver’s public folder

3

here i download this file but after one day again project is not working any other solution if you have?

4

you are supposed to change the url to your downloaded copy, too - sorry if it was not obvious

5

hi, update your package versions and update your nodemodules:
[ IMPORTANT ] Recent Updates to Environment Component

used a component to create the Environment light for the scene, the . This “apartment” preset comes from a CDN server and after recording this course, these servers needed to be changed within the library.

If you get any error loading the environment images, please update the React Three Fiber to React Three Drei library to the latest available version.

If you have any questions, please send me a message :blush:

6

lol, should work until githack goes out of business, I guess. why not just host via pmndrs.github.io? actually that’s the question for @CodyJasonBennett

7

we have this in place now which would allow for self-host but without having to copy files around GitHub - pmndrs/assets: 📦 Importable base64 encoded CC0 assets it would also work for vanilla the same way.

it’s just so convenient to quickly create a staging environment without having to deal with hdrihaven, but hosting assets has been a pain.

8

I dont get it. why https://cdn.jsdelivr.net/npm/@pmndrs/assets@1.6.0/models/suzi.glb.js rather than just glb? is this to avoid cors at jsdeliver?

again,

as you can see, mrdoob has been hosting threejs.org via github pages for a decade, and this whole time you could load any file off it.

9

you can’t url fetch from node modules. importing would work but then you need to have a loader in place that knows what “glb” is, or url-loader as a fallback. with the base64 js we can avoid that and with clever compression it’s feasible. the hdri’s for instance are only a fraction of the import cost of the originals.

import.meta will solve this, but it’s going to be a while until it’s safely available everywhere. but then we can remove base64.

10

as you can see, mrdoob has been hosting threejs.org via github pages for a decade, and this whole time you could load any file off it.

essentially we’re doing it now, the original drei presets are on github. but i think github is also bandwidth capped, a website will never run into it but these assets generated so much data this is the second time we were kicked. we also looked into cloudflare, might also be good but costs if we want our domain cdn.pmnd.rs.

1 Like
11

so what you’re sayin is, if someone makes a component loading a file from threejs․org and that component becomes popular, this will shut threejs․org down :face_with_open_eyes_and_hand_over_mouth: nice ddos vector lol