Load large json file from external website with D3

kaleidoscop 0
Viewed 17

On my site "mywebsite.com" I have a D3 javascript code running on some data set located at "otherwebsite.com/data.json", so I naively tried

d3.json("otherwebsite.com/data.json", function(error, json) {
if (!error) {

    console.log('done loading',json)
} else {
    console.log(error)
}
})

but of course it does not work :)

Access to XMLHttpRequest at 'otherwebsite/data.json' from origin 'https://mywebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Anyone has a better idea? I should emphasize that it is a large file (200MB).

Thanks

d3.js json javascript
1 Answers

Taken from the MDN page on CORS:

For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers.

The CORS header in question is Access-Control-Allow-Origin which needs to either be explicitly set to https://mywebsite.com or be set to something that includes that, such as *.

If you have access to the server for "otherwebsite.com" you can change the header being sent with the request.

Otherwise you'll probably have to download the data server side on "mywebsite.com" and then have the front end request it from your back end, rather than making a cross origin request, so you'll change the JS to look like:

d3.json("/data.json", function(error, json) {...
Matt Ellen0
Related