使用原生JS AJAX请求访问本地JSON文件时出现CORS错误?

5
我正在尝试使用原生JS AJAX请求从本地存储的JSON文件中获取JSON字符串(特别是不使用JQuery)-以下代码基于 这个答案 - 但我在Chrome控制台中一直收到错误信息(请见下文)。有什么想法吗?我已经尝试更改xhr.open和.send请求的位置,但仍然收到错误消息。我怀疑问题出在.send()请求上?
//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);
});

Chrome浏览器控制台报错如下:

"XMLHttpRequest无法加载file:///C:/Users/brett/Desktop/SightingsDB/js/species.json。跨域请求仅支持协议方案:http、data、chrome、chrome-extension、https、chrome-extension-resource。"

请问有什么解决方法吗?非常感谢。


2
这是一个关于安全的问题,请尝试在您的本地服务器或实时环境中运行它。 - Özgür Ersil
1
现代浏览器将每个 file:// URL 视为不同的域。 - Pointy
显然,你是直接从文件系统运行脚本,而不是从HTTP服务器中运行。(正如@Özgür Ersil所建议的那样) - Jovan Perovic
好的,谢谢大家 - 我正在从文件系统中运行,因为我正在尝试创建一个自包含的项目,以便稍后可以将其发送给某人,而无需设置服务器、数据库等。我是在做不可能的事吗? - lensvelt
1
你不能直接向本地文件系统发起Ajax请求。 - Felix Kling
显示剩余3条评论
2个回答

2
基本上,就像Felix、错误消息等下面所说的那样——无法对本地文件运行AJAX请求。
谢谢。

1

尝试在本地服务器上(如apache或wamp)运行应用程序,那么您将不会遇到任何问题。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接