Mapbox-gl-js: Cross domain problems with raster source

[jasonwoo]

Can anyone confirm if something like this should work using external raster tiles? I'm getting: "No 'Access-Control-Allow-Origin' header is present on the requested resource."

style = {
"version": 8,
"sources": {
            "raster-tiles": {
                "type": "raster",
                "tiles": ['https://some-external-server.com/tiles/{z}/{x}/{y}.jpg'],
                "tileSize": 256
            }
},
"layers": [{
            "id": "test-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 10
        }]
};

map = new mapboxgl.Map({
         container: 'map', 
         style: style,
         center: [-75.13,38.79], 
});

Thanks!

[tmcw]

No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is a descriptive error: does your server support CORS?

[jasonwoo]

Thanks for the reply. It's not my server but I would say it's probably unlikely that it would support CORS.
I'm currently using these tiles with "L.mapbox.tileLayer" in the Mapbox JS API and they load ok. I was just seeing what it would take to move things over to the GL JS API and ran into that. I thought (probably incorrectly) that I could add them as a raster source and things would behave the same way.

[ansis]

Unfortunately we can't support raster sources without CORS.

To use the raster images in WebGL we need to access the data in the images programmatically. We can only do this if the server supports CORS. Leaflet doesn't need this because it never accesses the data in the images. It just moves the <img>s around.

[jasonwoo]

WMS layers should work in the latest Mapbox GL:

https://www.mapbox.com/mapbox-gl-js/example/wms/

My guess is you need to enable CORS in your Geoserver instance.

On Tue, Feb 27, 2018 at 8:02 AM, imran50 [e-mail] wrote:

I am facing the problem of CORS.. want to use WMS Geoserver request with
Mapbox GL and facing the problem of CORS.
just want to clear the concept of the request, Is it the problem with the
Geoserver or client-side Mapbox GL?
what should i improve to solve this problem Mapbox GL or Geoserver ?
Thanks

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mapbox/mapbox-gl-js/issues/2171#issuecomment-368866145,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABCCc3QK-XBv1F46fXcT5kywKRuWTe2Qks5tY_zxgaJpZM4HgArq
.

[HarelM]

Is there any workaround for this?
When using openlayers, which uses a similar technique (a canvas) there's no CORS problem for external tile servers.
I'm in the middle of migrating from openlayers to this library when I ran into this issue. Needless to say this is a showstopper as my site allows adding external tile servers.

[risharde]

I'm having this issue even using this official example from mapbox (which is rather ironic)
https://docs.mapbox.com/mapbox-gl-js/example/add-terrain/

I get the cors warning as well:
"...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."

Any ideas how I can get around this issue?