javascript - 跨域 JSON - 哪个服务器提供源有关系吗？

Question

这个问题已经有答案了:

XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header (11 个回答)

已关闭 4 年前。

我找到了如何进行跨域 json 调用的简单教程 here

它工作得很好，所以我决定使用这个例子，只需更改网址:

var url = "http://api.myjson.com/bins/23xvb";

至

var url = "http://dl.sniper.pl/test.json"

不幸的是，更改它会返回这样的错误(在 Chrome 中):

XMLHttpRequest cannot load http://dl.sniper.pl/test.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

谷歌搜索该错误没有提供任何答案来找到解决方案，所以问题如下:为什么我会收到这样的错误以及如何解决它？

Answer 1

http://dl.sniper.pl/服务器必须配置为在对 http://dl.sniper.pl/test.json 请求的响应中发送 Access-Control-Allow-Origin 响应 header .

但是由于该服务器没有发送 Access-Control-Allow-Origin 响应 header ，因此您的浏览器拒绝允许您的前端 JavaScript 代码访问该响应。

因此，您要么必须配置 http://dl.sniper.pl/服务器发送 Access-Control-Allow-Origin 或者您可以通过 CORS 代理发出请求。

有一个开放的 CORS 代理，您可以通过将代码更改为以下内容来发出请求:

var url = "https://cors-anywhere.herokuapp.com/http://dl.sniper.pl/test.json"

通过开放的 CORS 代理发送请求 https://cors-anywhere.herokuapp.com它将 Access-Control-Allow-Origin 响应 header 添加到其中，然后将其作为响应传递回您的请求前端代码。

带有 Access-Control-Allow-Origin 响应 header 的响应是浏览器看到的内容，因此浏览器允许您的前端 JavaScript 代码实际访问该响应。

您还可以使用 https://github.com/Rob--W/cors-anywhere/ 轻松设置您自己的 CORS 代理

参见https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS解释当您使用 XHR 或 Fetch API 或 JavaScript 库中的 AJAX 方法发送跨源请求前端 JavaScript 代码时浏览器的行为方式，以及有关浏览器必须接收哪些响应 header 才能允许前端代码访问的详细信息的回应。