跨源请求仅支持 HTTP 即使在 Chrome --allow-file-access-from-files 之后也未修复

Question

我在我的 Javascript 代码中解析一个 json 文件，如下所示。

$.getJSON('file:///dashboard.json', function (json) {

但是，它会抛出

XMLHttpRequest 无法加载 file:///dashboard.json。 Cross origin requests 仅支持 HTTP。

我一直在寻找解决方案将近 7 个小时，但大多数建议都是使用这个：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

或

open -b com.google.chrome --args --allow-file-access-from-files

甚至当我使用第二个命令打开 Chrome 时，也会抛出相同的跨源请求错误。

第一个命令甚至没有运行，如下所示。

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome
[708:1287:0401/174956:ERROR:process_singleton_mac.cc(103)] Unable to obtain profile lock.
$ [0401/174957:ERROR:mach_broker_mac.mm(152)] Failed to look up named parent port: 0x44e unknown error code

我尝试使用此文件在端口 8000 上启动服务器，并通过提供 url http://localhost:8000/dashboard.json 来访问它，但它不能修复跨源请求错误。 （我的网络应用在端口8080 上运行）。

有什么问题？我怎样才能解决这个问题？ 请帮我。谢谢。

Answer 1

不同的端口号也会导致跨源问题：http://localhost:8000 访问来自 http://localhost:8080 的 json 文件。有多种方法可以解决跨域资源访问问题，例如 CORS、Server-proxy 和 JSONP。

我认为您可以尝试使用 JSONP 来解决您的问题。

第 1 步：更新 dashboard.json 并将文件类型更改为 javascript。 （如果您想了解 JSONP 的工作原理，请参阅此doc）

//assume that the json data looks like this {tabs:[{id:"1",name:"tab1",status:"on"},{id:"2",name:"tab2",status:"off"}]}
var data = {tabs:[{id:"1",name:"tab1",status:"on"},{id:"2",name:"tab2",status:"off"}]};        
onGetDashboardJSON(data);

第二步：使用$.ajax以JSONP方式获取跨源json数据

$.ajax({
    url: "http://localhost:8080/dashboard.js",
    dataType:"jsonp",
    success: function(response){

    },
    error: function(response){

    }
});

function onGetDashboardJSON(result){
    //do anything you want with the JSON 
    console.log(result);
}

希望这有帮助。