CODEWITHSUNDEEP
cross-domainmapbox-gl-js
fralbo
fralbo

Reputation: 2664

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

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?

Upvotes: 3

Views: 10311

Answers (1)

Keith Nordstrom
Keith Nordstrom

Reputation: 354

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.

Upvotes: 2

Related Questions