GeoTIFF / georaster

Wrapper around Georeferenced Rasters like GeoTIFF and soon JPG and PNG that provides a standard interface
Apache License 2.0
81 stars 32 forks source link

CORS with georaster/georaster-for-leaflet #88

Open PostholerCom opened 4 months ago

PostholerCom commented 4 months ago

I'm trying to read images from S3 with georaster/georaster-for-leaflet. If I disable all security, such as:

chromium --disable-web-security --user-data-dir=/tmp/chromium

...images load as expected. However, under normal browser start up I constantly get a CORS error message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://longurl/some.tif. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 206.

I'm not sure what parameters to pass or how to pass them to georaster. Any help would be greatly appreciated!

DanielJDufour commented 4 months ago

Hey, happy to help! Do you own the S3 Bucket? I think the owner needs to configure the CORS setting similar to what I've done below for the georaster-layer-for-leaflet bucket. You can see an example here: https://geotiff.github.io/georaster-layer-for-leaflet-example/examples/population.html

Screenshot 2024-04-29 at 9 43 35 PM

Let me know if that works for you!

If not, happy to troubleshoot further. Google Chrome is always adding new security features...

PostholerCom commented 4 months ago

Thanks for the quick response Daniel!

With my own buckets I don't have this issue as I can control the CORS config. That's not a problem.

It's with public S3 buckets that I don't control. An example is:

https://dataforgood-fb-data.s3.amazonaws.com/forests/v1/California/alsgedi_ca_v6_float/chm/02300111120.tif

I get the same errors in Firefox and Chromium, except I'm able to turn security off in Chromium. If you have Chromium on Linux run the above command without security and use this url for a working demo:

https://www.cloudnativemaps.com/examples/trees.html

Use the same url in Firefox and you'll see the errors. I think it's a matter of passing the correct CORS headers in fetch, but I'm not really sure.

Thanks again!