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

IT技术 javascript reactjs redux cors fetch-api
2021-03-28 14:59:09

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

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

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

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

获取 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 令牌要求有关,我是否需要做一些与代理相关的事情,还是因为其他原因?如果与代理相关,目前我正在运行一个完全由客户端驱动的应用程序,并且根本不使用服务器端代码。鉴于我的环境,这仍然可能吗?任何关于我应该走哪个方向的指导以及澄清我的误解将不胜感激。

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

1个回答

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

并且您无法在您自己的应用程序代码中修复该问题——无论您尝试什么,您都无法改变https://api.yelp.com/不支持 CORS的事实

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

因此,在前端代码中使用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 代码访问这些响应。

此外,由于您的请求包含AuthorizationContent-Type带有 value标头,因此application/json您的浏览器会在尝试您尝试发送的实际请求之前执行CORS 预检选项请求GET

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

感谢您的快速而彻底的答复。如果我理解正确,除非我在应用程序中实现服务器端代码,否则我将无法进行 Yelp Fusion API 调用?使用诸如 node.js 服务器之类的东西是否允许我这样做,这是一个相对简单的 API 请求还是还需要某种解决方法?
2021-05-22 14:59:09
您不需要 jQuery 或 React 或任何其他库/框架来处理 JSONP。你可以很容易地自己编写处理,通过在stackoverflow.com/questions/5943630/...或一些类似的例子
2021-06-02 14:59:09
这真是个好消息!看起来您引用的帖子的答案中的链接已损坏(github.com/Yelp/yelp-api/blob/master/v1/googlemaps_example/...)。无论如何,我看到 Yelp 的 API 的 jsonp 解决方法是通过 jQuery 完成的。您或任何人都知道 ReactJS 替代品吗?或者也许我只需要在我的应用程序中包含 jQuery,然后将它与我的 React 代码集成会非常无缝。
2021-06-03 14:59:09
@gpsugy 显然 Yelp API 确实支持 JSONP;例如,参见stackoverflow.com/questions/3827614/...因此,在前端代码中使用api.jquery.com/jquery.getjson或类似内容将允许您从前端代码向 Yelp API 跨域发出请求。我更新了答案以表明
2021-06-11 14:59:09
@gpsugy 是的,除非您在应用程序中实现服务器端处理,否则您将无法进行 Yelp Fusion API 调用,或者设置特殊的 CORS 代理,如stackoverflow.com/questions/20035101/...
2021-06-17 14:59:09