从浏览器中运行的前端 JavaScript 代码调用 Yelp API [英] Calling Yelp API from frontend JavaScript code running in a browser

问题描述

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

Would really appreciate anyone's help. I am relatively new to developing in React, using Mac OSX and Chrome as my browser. I have a small application that attempts to make an async GET request from Yelp Fusion's API using 'isomorphic-fetch', but receive the following error:

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

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.

我已经进行了大量搜索以查看已经存在对相同问题的响应，但是我对如何利用我对这种开发环境的相对较新的知识来解决我的问题感到更加困惑.(似乎特别有用的答案是:对预检请求的响应没有't 通过访问控制检查和使用HTTP的API请求componentDidMount 中的授权标头，但我真的不明白如何在我的环境中实际实施这些解决方案.我所做的任何尝试似乎都不正确，并且不会导致更改.

I have done a lot of searching to see what responses to identical issues already exist, but I am left even more confused in how to tackle my problem with my relatively new knowledge to this kind of development environment. (Answers that seem particularly helpful are: Response to preflight request doesn't pass access control check and API Request with HTTP Authorization Header inside of componentDidMount, but I do not really understand how to actually implement those solutions with my environment. Any attempts I make seem incorrect and do not result in a change.).

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

As a side note: I have installed the Allow-Control-Allow-Origin: * extension on my Chrome browser, but I receive the same error - just a shortened, less elaborate description of it:

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

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

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

The following is how I call the fetch in my code:

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

Is this an issue due to the syntax of my header with Yelp Fusion's OAUTH2 token requirements, do I need to do something proxy-related, or is the reason because of something else? If proxy-related, currently I am running a fully client-driven application and do not use server-side code at all. Would this still be possible given my environment? Any guidance as to which direction I should go and clarification of my misconceptions would be greatly appreciated.

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

Again, thank you for your help for a growing developer.

推荐答案

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

This cause of the problem is that https://api.yelp.com/ doesn’t support CORS.

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

And there’s nothing you can in your own application code to fix that—no matter what you try, you can’t change the fact that https://api.yelp.com/ doesn’t support CORS.

显然 Yelp API 确实支持 JSONP；参见例如 Yelp API OriginAccess-Control-Allow-Origin 不允许使用 http://localhost:8888.

Apparently the Yelp API does support JSONP though; see for example Yelp API Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin.

所以使用 https://api.jquery.com/jquery.getjson/或在您的前端代码中使用类似方法，您可以从前端代码向 Yelp API 跨域发出请求.

So using https://api.jquery.com/jquery.getjson/ or similar in your frontend code would allow you make requests to the Yelp API cross-origin from your frontend code.

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

A related issue in the GitHub issue tracker for the Yelp API examples repo confirms no CORS:

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

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

还有另一个相关问题:

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

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 工程师.

Both of the comments cited above are from a Yelp engineer.

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

So what the means is, there’s no way your frontend JavaScript code can make requests directly to Yelp API endpoints and get normal responses (as opposed to JSONP responses).

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

Specifically, because responses from the https://api.yelp.com/v3/businesses/search API endpoint don’t include the Access-Control-Allow-Origin response header, browsers will not allow your frontend JavaScript code to access those responses.

此外，由于您的请求包含 Authorization 和一个值为 application/json 的 Content-Type 标头，因此您的浏览器会执行 CORS 预检选项请求，然后再尝试实际GET 您尝试发送的请求.

Also, because your request includes the Authorization and a Content-Type header with the value application/json, your browser does a CORS preflight options request before ever attempting the actual GET request you’re trying to send.

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

And that preflight is what’s specifically failing in this case. But any other request you make from the frontend JavaScript code to that API endpoint would also fail—even if it didn’t trigger a preflight.

这篇关于从浏览器中运行的前端 JavaScript 代码调用 Yelp API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！