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

Question

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

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

我已经进行了很多搜索，以查看已经存在对相同问题的应对措施，但是我对于如何用这种开发环境的相对较新的知识来解决问题感到更加困惑。

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

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

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

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/不支持CORS。

而且，您无法在自己的应用程序代码中解决此问题-无论您尝试什么，都无法更改https://api.yelp.com/不支持CORS 的事实。

显然，虽然Yelp API确实支持JSONP。)。

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

Yelp API示例回购的GitHub问题跟踪器中的一个相关问题确认没有CORS：

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

还有另一个相关问题：

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

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

因此，这意味着，您的前端JavaScript代码无法直接向Yelp API端点发出请求并获得常规响应（与JSONP响应相反）。

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

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

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