javascript - 从浏览器中运行的前端 JavaScript 代码调用 Yelp API

Question

非常感谢任何人的帮助。我对 React 开发比较陌生，使用 Mac OSX 和 Chrome 作为我的浏览器。我有一个小型应用程序试图使用“同构获取”从 Yelp Fusion 的 API 发出异步 GET 请求，但收到以下错误:

Fetch API cannot load https://api.yelp.com/v3/businesses/search?[remaining URL] Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我已经进行了大量搜索以查看对相同问题的响应已经存在，但我对如何使用我对这种开发环境的相对较新的知识来解决我的问题感到更加困惑。 (似乎特别有用的答案是:Response to preflight request doesn't pass access control check 和 API Request with HTTP Authorization Header inside of componentDidMount，但我并不真正了解如何在我的环境中实际实现这些解决方案。我所做的任何尝试似乎都不正确，并且不会导致更改。)。

附带说明:我已经在我的 Chrome 浏览器上安装了 Allow-Control-Allow-Origin: * 扩展程序，但我收到了同样的错误 - 只是一个简短的、不太详细的描述:

Fetch API cannot load https://api.yelp.com/v3/businesses/search?[remaining URL]. Response for preflight has invalid HTTP status code 500

以下是我在代码中调用 fetch 的方式:

var options = (
    method: 'get',
    headers: new Headers({
        'Access-Control-Allow-Origin': '*',
        'Authorization': [my token]
        'Content-Type': 'application/json'
    })
}
return fetch(url, options);

这是由于我的 header 语法与 Yelp Fusion 的 OAUTH2 token 要求造成的问题，我需要做一些与代理相关的事情，还是因为其他原因？如果代理-相关的，目前我正在运行一个完全客户端驱动的应用程序，根本不使用服务器端代码。考虑到我的环境，这仍然可能吗？ 任何关于我应该去哪个方向的指导和澄清我的误解将不胜感激。

再次感谢您对成长中的开发者的帮助。

Answer 1

这个问题的原因是https://api.yelp.com/不支持CORS。

并且您无法在您自己的应用程序代码中解决这个问题——无论您尝试什么，您都无法改变 https://api.yelp.com/ 没有的事实不支持 CORS。

显然 Yelp API 确实支持 JSONP；参见例如 Yelp API Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin 。

因此，在您的前端代码中使用 https://api.jquery.com/jquery.getjson/ 或类似代码将允许您从您的前端代码向 Yelp API 跨源请求。

---

Yelp API 示例存储库的 GitHub 问题跟踪器中的 related issue 确认没有 CORS:

TL;DR: No CORS is not supported by api.yelp.com

和 another related issue :

As I answered in #99 , we do not provide the CORS headers necessary to use clientside js to directly make requests to the api.

上面引用的两条评论均来自 Yelp 工程师。

这意味着什么，您的前端 JavaScript 代码无法直接向 Yelp API 端点发出请求并获得正常响应(与 JSONP 响应相反)。

具体来说，因为来自 https://api.yelp.com/v3/businesses/search API 端点的响应不包括 Access-Control-Allow-Origin 响应 header ，浏览器将不允许您的前端 JavaScript 代码访问这些响应。

此外，因为您的请求包含 Authorization 和一个值为 application/json 的 Content-Type header ，您的浏览器执行 CORS preflight options request在尝试发送实际的 GET 请求之前。

在这种情况下，预检是特别失败的地方。但是，您从前端代码向该 API 端点发出的任何其他请求也会失败——即使它没有触发预检。