Mapbox: How to solve CORS issue in map.addSource()

Question

I'm currently trying the Mapbox examples and notably this one. When the example tries to get the GeoJSON points from the following code:

map.addSource("earthquakes", {
    type: "geojson",
    // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
    // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
    data: "https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
    cluster: true,
    clusterMaxZoom: 15, // Max zoom to cluster points on
    clusterRadius: 20 // Use small cluster radius for the heatmap look
});

I get the following error:

Blocking a Cross-Origin Request: The "Same Origin" policy does not allow you to view the remote resource located at https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson . Reason: The CORS "Access-Control-Allow-Origin" header is missing.

I saw about similar problems what to add in http header but how to do it here?

You can get around this using a CORS proxy https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource/42744707#42744707 Specifically, send your request to https://cors-anywhere.herokuapp.com/https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson instead — sideshowbarker, Apr 14 '17 at 14:43
@sideshowbarker seems not working, your link result in a `Missing required request header. Must specify one of: origin,x-requested-with` error. — fralbo, Apr 14 '17 at 15:09
Yeah you need to make the request from frontend JavaScript in a browser. The browser adds the necessary Origin header the proxy expects to see. — sideshowbarker, Apr 14 '17 at 15:10

score 2 · Accepted Answer · answered Apr 14 '17 at 14:46

2

This is up to mapbox. Their server is saying the origin from which you are querying this is not allowed by policy (check headers in the options request). Because their policy isn't supporting the Access-Control-Allow-Origin header, any requests made by XHR to mapbox.com must come from mapbox.com.

Now you could conceivably get around this by using a proxy server on a local VM to pretend you're on mapbox.com - using a HaProxy container, for example, on Virtual Box - and in its config setting up an ACL that points certain requests to mapbox.com to your code and the rest to mapbox.com's IP address. You would then use /etc/hosts to pass requests to mapbox to your VM instead and handle it from there. This is not a simple solution, I just thought it worth pointing out that it's possible.

answered Apr 14 '17 at 14:46

Keith Nordstrom

354
2
9

Thanks a lot but as it's for tuto, I'm going to download this file locally. Anyway, that's not really cool from Mapbox. they should put the files where it's possible to use it. – fralbo Apr 14 '17 at 15:06
There are worries from their end about security, injection, etc. that can come from cross origin attacks that the user simply doesn't see. You could try asking them if they have endpoints you can use that do expose the required CORs headers. – Keith Nordstrom Apr 14 '17 at 15:10
yes, but as I said, that's not a big problem as I can download it locally. – fralbo Apr 14 '17 at 15:11

Mapbox: How to solve CORS issue in map.addSource()

1 Answers1