使用Etsy的CORS和ReactJS

Question

我是一个试图学习反应的n00b。我正在构建一个使用Etsy的API的网站。注册了一个应用程序和所有的东西。他们有一个关于CORS和代理的页面：已开始/jsonp

例如，我试图对一家商店的商品清单进行一次检索：

fetch('https://openapi.etsy.com/v2/shops/[shopId]/listings/active?api_key=[apiKey]')

但这违反了浏览器的CORS策略。“没问题，”Etsy的文件说。你总是可以使用他们的代理: beta-api.etsy.com。因此，我将其添加到我的package.json文件中：

"proxy": "https://beta-api.etsy.com/"

然后我改变了我的取回线：

fetch('/v2/shops/[shopId]/listings/active?api_key=[apiKey]')

但是浏览器中的CORS仍然被违反。

CORS策略阻止从源'key=[apiKey]‘(从’key=[apiKey]‘重定向)获取'http://localhost:3000’的访问:请求的资源上不存在‘访问控制-允许-原产地’标题。如果不透明响应满足您的需要，请将请求的模式设置为“no- CORS”，以获取禁用CORS的资源。

我也不想要一个不透明的反应，所以做“不做什么”也没什么用。有没有人对我如何至少建立和运行一个本地网站有任何建议？

Answer 1

因为您的服务器设置了Access-Control-Allow-Origin来限制跨域通信量，所以您会收到该错误。您正在从本地主机发送请求，因此被认为是跨域的。

如果您能够将服务器设置更改为设置Access-Control-Allow-Origin: *，那么您可以在没有CORS错误的情况下发出这些请求，但我不建议这样做。

最好的解决方案可能是代理服务器。您可以使用cors-任何地方 heroku应用程序轻松地做到这一点。

关于这一问题的中篇文章摘录

cors-anywhere服务器是将CORS头添加到请求中的代理。代理充当客户端和服务器之间的中介。 在这种情况下，cors-anywhere代理服务器在发出请求的前端web应用程序和使用数据响应的服务器之间运行。 类似于允许-控制-允许-起源插件，它添加了更开放的访问控制-允许-原产地：*头的响应。 假设您的前端正在尝试向：https://joke-api-strict-cors.appspot.com/jokes/random发出GET请求 但是这个api没有允许web应用程序域访问它的访问控制允许源值。 因此，请将GET请求发送到：https://cors-anywhere.herokuapp.com/https://joke-api-strict-cors.appspot.com/jokes/random 代理服务器接收https://joke-api-strict-cors.appspot.com/jokes/random 从上面的网址。然后，它发出请求以获取服务器的响应。最后，代理将访问控制-允许-原产地：*应用于原始响应。