没有“访问控制允许来源”客户端修复答案

【问题标题】：No 'Access-Control-Allow-Origin' client side fix没有“访问控制允许来源”客户端修复
【发布时间】：2017-09-09 12:23:23
【问题描述】：

我正在尝试从API by suredbits 获取免费的 NFL 数据。不幸的是，在他们的标题中，他们没有添加Access-Control-Allow-Origin，这会产生 CORS 问题。当我尝试运行这样的代码时......

$.getJSON("http://api.suredbits.com/nfl/v0/stats/jones/julio", function(playerData) {
      alert(playerdata); 
}

我不断收到此错误No 'Access-Control-Allow-Origin' header is present on the requested resource.

所以基本上，他们有什么方法可以通过客户端解决错误吗？

【问题讨论】：

不，因为 CORS 保护资源 - 您可以通过您的服务器代理请求，然后 CORS 不是问题
这就是我在 stackoverflow 上阅读了几乎所有关于此的问题后才意识到的。是否有任何教程或任何东西可以教我如何做到这一点？
取决于您的服务器端技术
您可以在服务器端拨打电话。我不认为这是他们的错误，他们只是不想被互联网范围内的任何随机浏览器调用。
我不得不承认 API 不包含该标头有点奇怪。我认为目前最好的办法是联系 SuredBits (twitter.com/suredbits) 并询问这是否是一个错误，或者他们是否有任何替代方法可以从 JS 查询数据（使用令牌？）。从 JS 获得这项工作的唯一其他选择是在您的 Web 服务器上设置代理 - 这意味着它是您自己的服务器从 API 获取数据然后将其返回到您的脚本（从而避免 CORS 问题）。

标签： javascript api cors

【解决方案1】：

实际上有一种方法可以从客户端修复它：通过将请求 URL 更改为 https://cors-anywhere.herokuapp.com/http://api.suredbits.com/nfl/v0/stats/jones/julio:

const proxyURL = "https://cors-anywhere.herokuapp.com/";
const requestURL = "http://api.suredbits.com/nfl/v0/stats/jones/julio";
$.getJSON(proxyURL + requestURL, function(playerData) {
  console.log(playerData);
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

是的，这不是完全从客户端修复它 - 因为它实际上在做的是，导致请求通过 https://cors-anywhere.herokuapp.com/ 发出，这是一个开放的 CORS 代理，它只是添加了Access-Control-Allow-Origin 响应标头，以便浏览器允许您的前端 JavaScript 代码访问响应。

但正如答案中的代码 sn-p 所示，它绝对不需要对托管您要从中获取数据的 API 端点的服务器进行任何更改。相反，它只需要对您自己的前端代码进行微不足道的更改。

当然，依赖这样的公共开放代理并非在所有情况下都是正确的解决方案。但至少在 API 提供者尚未开始使用 CORS 启用他们的 API 以便您可以直接向其发送请求并获得您可以使用的响应的情况下，这是一个很好的解决方案。

No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API 的答案的如何使用 CORS 代理解决“No Access-Control-Allow-Origin header”问题部分有一些更多细节。

【讨论】：

这不是“不完全从客户端修复它”，它根本不是客户端修复。