当前位置: 首页 > 面试题库 >

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

倪鹏
2023-03-14
问题内容

我正在尝试使用香草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无法加载文件:///
C:/Users/brett/Desktop/SightingsDB/js/species.json。跨源请求仅支持以下协议方案:http,数据,chrome,chrome扩展名,https,chrome-
扩展资源。”

非常感谢您提供任何见解-非常感谢。


问题答案:

基本上就像Felix,错误消息等,下面将说-无法对本地文件运行AJAX请求。

谢谢。



 类似资料:
  • 我所要做的就是访问json文件的内容并将其显示到网页上。但我有个错误: JSON文件和HTML文件都在同一个文件夹中。 这是我的html页面: 这是JSON文件myData。json: 我真的不明白这个问题,但如果我做错了,有人能告诉我更好的方法吗?

  • Angular.js:14516可能未处理的拒绝:{“data”:null,“status”:-1,“config”:{“method”:“post”,“transformrequest”:[null],“transformresponse”:[null],“jsonpcallbackparam”:“callback”,“url”:“http://localhost:3000/lvl/2/data

  • 问题内容: 我是angularjs的新手,我整天都在网上进行搜索,目的是找到一种解决方案,可以从本地json文件获取数据,而不必在我的webapp中使用本地主机。不幸的是,我还没有找到任何东西。我尝试使用$http.get,但收到Cross Origin *错误。 有没有其他方法可以从本地json文件中获取数据而不必在本地托管我的webapp? angularjs是否有其他功能可以从本地json文

  • 我有一个名为fake的文件。我的angular应用程序中的json内部资源。此文件的路径如下所示。 MyApp= 我想使用我的组件中的HttpClient(位于应用程序文件夹内)对此文件发出请求。 MyApp= 组件源代码 我发生了以下错误 的HttpErrorResponse Http故障响应http://localhost:4200/assets/json/fake.json:404找不到 我

  • 问题内容: 我正在从客户端向Google oauth 2 API 进行ajax调用以获取访问令牌,但出现以下错误: 对预检请求的响应未通过访问控制检查:在所请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此,不允许访问来源“ http://blah-blah.com ” 我希望该调用为ajax,以便通过或换句话说,在进行调用时不会打扰用户,我如何获得访问令牌以