CORS error when accessing local JSON file using vanilla JS AJAX request?

Question

I am trying to use a vanilla JS AJAX request to pull back a JSON string from a locally stored JSON file (specifically trying not to use JQuery) - the below code is based on this answer - but I keep getting an error in the Chrome console (see below). Any ideas where I'm going wrong? I have tried changing the positioning of the xhr.open & .send requests, but still get error messages. I suspect the issue lies with the .send() request?

//Vanilla JS AJAX request to get species from JSON file & populate Select box
function getJSON(path,callback) {

    var xhr = new XMLHttpRequest();                                         //Instantiate new request

    xhr.open('GET', path ,true);                                            //prepare asynch GET request
    xhr.send();                                                             //send request

    xhr.onreadystatechange = function(){                                    //everytime ready state changes (0-4), check it
        if (xhr.readyState === 4) {                                         //if request finished & response ready (4)
            if (xhr.status === 0 || xhr.status === 200) {                   //then if status OK (local file || server)
                var data = JSON.parse(xhr.responseText);                    //parse the returned JSON string
                if (callback) {callback(data);}                             //if specified, run callback on data returned
            }
        }
    };
}
//-----------------------------------------------------------------------------

//Test execute above function with callback
getJSON('js/species.json', function(data){
    console.log(data);
});

The console in Chrome is throwing this error:

"XMLHttpRequest cannot load file:///C:/Users/brett/Desktop/SightingsDB/js/species.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."

Would be grateful for any insights - many thanks.

it is a problem about security, try to run it in your localhost server or in live — Özgür Ersil, Jul 07 '15 at 12:53
What is unclear about the error message? It clearly says that CORS is not supported for the `file` protocol. — Felix Kling, Jul 07 '15 at 12:53
Modern browsers treat every `file://` URL as if it were a different domain. — Pointy, Jul 07 '15 at 12:54
Obviously, you're running the script directly from filesystem, instead of from HTTP server. (as @Özgür Ersil suggested) — Jovan Perovic, Jul 07 '15 at 12:54
Correct, thanks all - I am running from the filesystem as I am trying to create a self contained project that I can send on to someone later without having to set up server, db etc. Am I smoking my socks? — lensvelt, Jul 07 '15 at 13:00
You simply can't make Ajax requests to the local file system. — Felix Kling, Jul 07 '15 at 13:02
This solves the problem: http://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file — Slartibartfast, Dec 31 '15 at 04:27

score 2 · Accepted Answer · answered Jul 07 '15 at 13:07

2

Basically as Felix, error msg, et al below say - simply can't run an AJAX request against a local file.

Thanks.

answered Jul 07 '15 at 13:07

lensvelt

151
2
11

score 1 · Answer 2 · answered Jul 07 '15 at 12:59

1

Try to run the application on local server like apache or wamp then you will not face any issue

answered Jul 07 '15 at 12:59

user1608841

2,455
1
27
40

CORS error when accessing local JSON file using vanilla JS AJAX request?

2 Answers2

Linked

Related