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

问题描述

非常感谢任何人的帮助。我相对较不熟悉使用Mac OSX和Chrome作为浏览器在React中进行开发。我有一个小型应用程序，尝试使用'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 ？ [剩余URL] 对预检请求的响应未通过访问控制检查：所请求的资源上不存在 Access-Control-Allow-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 内的Authorization Header，但是我真的不明白如何在我的环境中实际实现这些解决方案。我所做的任何尝试似乎都是错误的，不会导致更改。）

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:

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

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

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

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起源http：// localhost：8888被Access-Control-Allow-Origin禁止使用。

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.

A 相关问题在Yelp API示例回购的GitHub问题跟踪器中确认没有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.

此外，因为您的请求包括授权和 Content-Type 标头，其值为 application / json ，您的浏览器会执行 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屋！