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

Question

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

Fetch API 无法加载https://api.yelp.com/v3/businesses/search？[剩余 URL]对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问来源“ http://localhost:3000 ”。响应的 HTTP 状态代码为 500。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我做了很多搜索，看看已经存在对相同问题的回应，但我对如何用我对这种开发环境相对较新的知识来解决我的问题感到更加困惑。（似乎特别有用的答案是：对预检请求的响应未通过访问控制检查和在 componentDidMount 内部使用 HTTP 授权标头的 API 请求，但我并不真正了解如何在我的环境中实际实现这些解决方案。我所做的任何尝试看起来不正确并且不会导致更改。）。

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

Fetch API 无法加载https://api.yelp.com/v3/businesses/search？[剩余网址]。预检响应具有无效的 HTTP 状态代码 500

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

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

这是由于我的标头语法与 Yelp Fusion 的 OAUTH2 令牌要求导致的问题吗？我是否需要执行一些与代理相关的操作，或者是其他原因造成的？如果与代理相关，当前我正在运行完全客户端驱动的应用程序，根本不使用服务器端代码。考虑到我的环境，这仍然可能吗？任何关于我应该走哪个方向的指导以及对我的误解的澄清将不胜感激。

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

Answer 1

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

\n

并且\xe2\x80\x99s 在你自己的应用程序代码中无法解决这个问题\xe2\x80\x94无论你尝试什么，你都无法\xe2\x80\x99改变这样的事实：https://api.yelp.com/并且\xe2\x80\x99s 在你自己的应用程序代码中无法修复\xe2\x80\x94无论你尝试什么，你\xe2\x80\x99t 都无法改变\xe2\x80\x99t 支持CORS。

\n

显然 Yelp API 确实支持 JSONP；例如，请参阅 Access-Control-Allow-Origin 不允许 Yelp API Origin http://localhost:8888。

\n

所以使用https://api.jquery.com/jquery.getjson/或类似内容将允许您从前端代码向 Yelp API 跨域发出请求。

\n\n

Yelp API 示例存储库的 GitHub 问题跟踪器中的相关问题确认没有CORS ：

\n

\n

TL;DR：api.yelp.com 不支持 CORS

\n

\n

另一个相关问题：

\n

\n

正如我在 #99 中回答的那样，我们不提供使用客户端 js 直接向 api 发出请求所需的 CORS 标头。

\n

\n

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

\n

那么意思就是，您的前端 JavaScript 代码无法直接向 Yelp API 端点发出请求并获得正常响应（而不是 JSONP 响应）。

\n

具体来说，由于来自https://api.yelp.com/v3/businesses/searchAPI 端点 don\xe2\x80\x99t 的响应包含Access-Control-Allow-Origin响应标头，浏览器将不允许您的前端 JavaScript 代码访问这些响应。

\n

此外，由于您的请求包含Authorization和Content-Type值为 的标头application/json，因此您的浏览器会在尝试发送您\xe2\x80\x99 尝试发送的实际请求之前执行CORS 预检选项请求。GET

\n

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

\n