在浏览器中从前端 JavaScript 代码 运行 调用 Yelp API
Calling Yelp API from frontend JavaScript code running in a browser
非常感谢任何人的帮助。我对 React 开发比较陌生，使用 Mac OSX 和 Chrome 作为我的浏览器。我有一个小型应用程序试图使用 'isomorphic-fetch' 从 Yelp Fusion 的 API 发出异步 GET 请求，但收到以下错误：
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.
我已经进行了大量搜索以查看已经存在对相同问题的响应，但我对如何利用我对这种开发环境的相对较新的知识来解决我的问题感到更加困惑。 （似乎特别有用的答案是： and ，但我并不真正了解如何在我的环境中实际实施这些解决方案。我所做的任何尝试似乎都不正确，并且不会导致更改。）。
附带说明：我已经在我的 Chrome 浏览器上安装了 Allow-Control-Allow-Origin: * 扩展程序，但我收到了同样的错误 - 只是对它的简短描述：
Fetch API cannot load https://api.yelp.com/v3/businesses/search?[remaining URL]. Response for preflight has invalid HTTP status code 500
以下是我在代码中调用 fetch 的方式：
var options = (
method: 'get',
headers: new Headers({
'Access-Control-Allow-Origin': '*',
'Authorization': [my token]
'Content-Type': 'application/json'
})
}
return fetch(url, options);
这是由于我的 header 语法和 Yelp Fusion 的 OAUTH2 令牌要求导致的问题吗，我需要做些什么吗 proxy-related，或者是是因为其他原因吗？ 如果 proxy-related，目前我是 运行 一个完全 client-driven 的应用程序，根本不使用 server-side 代码。考虑到我的环境，这仍然可能吗？ 任何关于我应该走向何方的指导和澄清我的误解将不胜感激。
再次感谢您对成长中的开发人员的帮助。
这个问题的原因是https://api.yelp.com/不支持CORS。
并且您无法在自己的应用程序代码中解决这个问题——无论您尝试什么，都无法改变 https://api.yelp.com/ 不支持 CORS 的事实。
显然 Yelp API 确实支持 JSONP；参见例如 Yelp API Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin.
因此，在您的前端代码中使用 https://api.jquery.com/jquery.getjson/ 或类似代码将允许您从前端代码向 Yelp API cross-origin 发出请求。
GitHub Yelp API 示例回购的问题跟踪器中的 related issue 确认没有 CORS：
TL;DR: No CORS is not supported by api.yelp.com
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 工程师。
那么这意味着什么，您的前端 JavaScript 代码无法直接向 Yelp API 端点发出请求并获得正常响应（与 JSONP 响应相反）。
具体来说，因为来自 https://api.yelp.com/v3/businesses/search API 端点的响应不包括 Access-Control-Allow-Origin 响应 header，浏览器将不允许您的前端 JavaScript访问这些响应的代码。
此外，由于您的请求包含 Authorization 和 Content-Type header 且值为 application/json，您的浏览器在尝试之前会执行 CORS preflight options request您尝试发送的实际 GET 请求。
在这种情况下，预检是特别失败的地方。但是您从前端 JavaScript 代码向 API 端点发出的任何其他请求也会失败——即使它没有触发预检。
非常感谢任何人的帮助。我对 React 开发比较陌生，使用 Mac OSX 和 Chrome 作为我的浏览器。我有一个小型应用程序试图使用 'isomorphic-fetch' 从 Yelp Fusion 的 API 发出异步 GET 请求，但收到以下错误：
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.
我已经进行了大量搜索以查看已经存在对相同问题的响应，但我对如何利用我对这种开发环境的相对较新的知识来解决我的问题感到更加困惑。 （似乎特别有用的答案是：
附带说明：我已经在我的 Chrome 浏览器上安装了 Allow-Control-Allow-Origin: * 扩展程序，但我收到了同样的错误 - 只是对它的简短描述：
Fetch API cannot load https://api.yelp.com/v3/businesses/search?[remaining URL]. Response for preflight has invalid HTTP status code 500
以下是我在代码中调用 fetch 的方式：
var options = (
method: 'get',
headers: new Headers({
'Access-Control-Allow-Origin': '*',
'Authorization': [my token]
'Content-Type': 'application/json'
})
}
return fetch(url, options);
这是由于我的 header 语法和 Yelp Fusion 的 OAUTH2 令牌要求导致的问题吗，我需要做些什么吗 proxy-related，或者是是因为其他原因吗？ 如果 proxy-related，目前我是 运行 一个完全 client-driven 的应用程序，根本不使用 server-side 代码。考虑到我的环境，这仍然可能吗？ 任何关于我应该走向何方的指导和澄清我的误解将不胜感激。
再次感谢您对成长中的开发人员的帮助。
这个问题的原因是https://api.yelp.com/不支持CORS。
并且您无法在自己的应用程序代码中解决这个问题——无论您尝试什么，都无法改变 https://api.yelp.com/ 不支持 CORS 的事实。
显然 Yelp API 确实支持 JSONP；参见例如 Yelp API Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin.
因此，在您的前端代码中使用 https://api.jquery.com/jquery.getjson/ 或类似代码将允许您从前端代码向 Yelp API cross-origin 发出请求。
GitHub Yelp API 示例回购的问题跟踪器中的 related issue 确认没有 CORS：
TL;DR: No CORS is not supported by api.yelp.com
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 工程师。
那么这意味着什么，您的前端 JavaScript 代码无法直接向 Yelp API 端点发出请求并获得正常响应（与 JSONP 响应相反）。
具体来说，因为来自 https://api.yelp.com/v3/businesses/search API 端点的响应不包括 Access-Control-Allow-Origin 响应 header，浏览器将不允许您的前端 JavaScript访问这些响应的代码。
此外，由于您的请求包含 Authorization 和 Content-Type header 且值为 application/json，您的浏览器在尝试之前会执行 CORS preflight options request您尝试发送的实际 GET 请求。
在这种情况下，预检是特别失败的地方。但是您从前端 JavaScript 代码向 API 端点发出的任何其他请求也会失败——即使它没有触发预检。