0

I'm making 51 XMLHttpRequest calls to receive 161.3 MB of data for a mapping project. Every time I reload the page, these calls go out again, and it seems like they are all being cached, because the memory of the web browser (Firefox) continues to rise on every page reload until the tab crashes. I'm trying to prevent these results from being cached.

The original code returns the result fine:

var xhr = new XMLHttpRequest();
var url = 'http://briennakh.me/accessibility-maps/data/census tracts/geojsons/Alabama.json';
xhr.addEventListener('load', function() {
    console.log(this.response);
});
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.send();

When I add the request header xhr.setRequestHeader('cache-control', 'no-cache'); below xhr.open('GET', url); to specify no caching, it throws the following error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote 
resource at http://briennakh.me/accessibility-maps/data/census%20tracts/geojsons
/Alabama.json. (Reason: CORS request did not succeed).

How can I stop these results from being cached?

Note: My site is served on Github pages. I do not have access to the backend code.

aucamort
  • 1,248
  • 12
  • 26
  • The reason the browser is reporting the error message cited in the question is that when you try to add a 'cache-control' request header to the request, that triggers your browser to first send a CORS preflight OPTIONS request — and that fails because the server responds with a 405 Method Not Allowed error. So to make that server not do that, you’d need to have access to the server environment of that `http://briennakh.me/accessibility-maps/data/census tracts/geojsons`, and you’d need to change the server code there to make it respond to OPTIONS requests with a 200 OK rather than a 405 error. – sideshowbarker Mar 16 '20 at 06:33
  • 1
    Anyway, sending a `cache-control: no-cache` request header isn’t gonna prevent browsers from caching the response. – sideshowbarker Mar 16 '20 at 06:35

0 Answers0