cross origin error when using local file , and testing locally

Question

Accessing data.json file using ajax calls receiving error as

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

I am using a local json file, not server data.

I have tried with start chrome --allow-file-access-from-files is is working fine but everytime i need to run these command

How to add metatag for allow-file-access-from-files for particular file when code runs in chrome/jquery

Ajax call :

 $.ajax({
        url: 'data.json',
        dataType: 'JSONP',
        jsonpCallback: 'callbackFnc',
        type: 'GET',
        async: false,
        crossDomain: true,
        success: function (data) {
            engines = data;
            myDOM();
         },
        failure: function () { },
        complete: function (data) {
            if (data.readyState == '4' && data.status == '200') {
                console.log(" Status: 'SUCCESS' ");
            }
            else {
                console.log(" Status: 'FAIL' ");                   
            }
        }
    });

data.json :

[
    {
        "Function": "CAB",
        "Part_No": "RE284091",
        "Description": "Cab Air Filter",
        "Hours": "1000",
        "Model": "7200R",
        "Serial_NO":"xxxx"
    },
    {
        "Function": "CAB",
        "Part_No": "RE291412",
        "Description": "RECIRCULATION AIR FILTER",
        "Hours": "1000",
        "Model": "7200R",
        "Serial_NO":"xxxx"
    }

]

Welcome on StackOverflow. Please have a look at [Markdown help](https://stackoverflow.com/editing-help) to improve the readability of your next question. — Andreas, Apr 19 '18 at 06:12
Possible duplicate of ["Cross origin requests are only supported for HTTP." error when loading a local file](https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local) — Andreas, Apr 19 '18 at 06:14

Justinjs · Answer 1 · 2018-04-19T07:50:13.700

0

have you tried this

$.ajax({
    url: 'http://data.json',
    dataType: 'JSON',
    type: 'GET',
    async: false,
    crossDomain: true,
    success: function () { },
    failure: function () { },
});

if it doesnt work try to use JSONP , since it would bypass the same origin policy

$.ajax({
        url: 'pathtofile',
        dataType: 'JSONP',
        jsonpCallback: 'callbackFnc',
        type: 'GET',
        async: false,
        crossDomain: true,
        success: function () { },
        failure: function () { },
        complete: function (data) {
            if (data.readyState == '4' && data.status == '200') {
                errorLog.push({ IP: Host, Status: 'SUCCESS' })
            }
            else {
                errorLog.push({ IP: Host, Status: 'FAIL' })
            }
        }
    });

edited Apr 19 '18 at 07:50

answered Apr 19 '18 at 07:14

Justinjs

130
7

jQuery AJAX status “200 OK”, but no data response.Please clear these issue . Thanks in advance – Vani.Ashireddy Apr 19 '18 at 09:18
I have tried these one jQuery AJAX status “200 OK”, but no data response – Vani.Ashireddy Apr 19 '18 at 09:20
which one have u got success JSON or JSONP. Paste the ajax code and sample data so that we may have a clear view of the issue – Justinjs Apr 19 '18 at 11:26
with datatype : JSONP it is success , but no data response – Vani.Ashireddy Apr 20 '18 at 03:39
show us your code and the sample data in the data.json file. – Justinjs Apr 20 '18 at 06:51
take a look at this- [https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local?noredirect=1&lq=1] – Justinjs Apr 20 '18 at 07:00
sample json file [ { "Function": "CAB", "Part_No": "RE284091" }, { "Function": "CAB", "Part_No": "RE291412" } ] – Vani.Ashireddy Apr 20 '18 at 08:42
ajax code is same as you shared earleir i.e., second one path of file is " url: 'data.json' " – Vani.Ashireddy Apr 20 '18 at 08:59
I have edited my question . Please help me in this regard . Thanks in advance – Vani.Ashireddy Apr 20 '18 at 09:35
Its working fine for me. You are running this using a webserver isnt it. This file data.json is inside this webserver or outside ? – Justinjs Apr 23 '18 at 07:13
no I am not using any web-server ,data.json is a local file from which i am accessing file – Vani.Ashireddy Apr 24 '18 at 07:49
the solution is to use a webserver like xampp, lampp or apache webserver and access your files like this - example : http://localhost:80/index.html. your ajax call will be inside this index.php – Justinjs Apr 25 '18 at 07:28

score 0 · Answer 2 · answered Sep 20 '18 at 08:46

You should try and run it through a webserver. The browser itself shall not be able to access files due to security concerns. You should also not try and bypass that by setting some browser-specific flags.

I had a similar issue and running it inside a web-server fixed it for me.

cross origin error when using local file , and testing locally

2 Answers2