ReactJS Axios 外部 API CORS

Posted 2023-03-04

【中文标题】ReactJS Axios 外部 API CORS

【英文标题】：ReactJS Axios External API CORS

【发布时间】：2021-10-23 06:19:22

【问题描述】：

我在我的 React 项目中使用外部 API 但我在那里遇到了 CORS 错误 当我在谷歌搜索时，有很多文章建议在后端服务器上设置 CORS 但在我的情况下，我使用的是外部 API，我无法控制他们的后端在那里添加 CORS 我可以只在前端或浏览器内部禁用它而不接触后端吗？ 这是错误代码

Access to XMLHttpRequest at 'https://externaldomain.com' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

【问题讨论】：

您无法在客户端上解决此问题。如果您不拥有 API，请通过您拥有的 API 进行代理。

如何代理它？或者是否有任何 chrome 扩展？ @jonrsharpe

我的意思是您向您的 API 发出请求，而您的服务器向外部 API 发出请求。只有当您能够说服所有尝试使用您的应用的人安装它时，您才能使用 Chrome 扩展程序。

我明白了，我想我想尝试使用 chrome 扩展，你介意告诉我应该使用哪个扩展来解决这个问题吗？ @jonrsharpe

我虽然明确表示这是一个坏主意，但如果不是：那是个坏主意。并且建议与 SO 无关。

【参考方案1】：

如果 API 未配置正确的 CORS 设置，并且它不是您的 API，则其中一种解决方案是使用配置为处理具有正确 CORS 标头的请求的代理。

看起来像这样：

您可以配置自己的代理，也可以像这样使用现成的代理（请注意，此代理的作者要求不要过度使用，所以如果它是一个大型应用程序，您应该自己设置）：

https://thingproxy.freeboard.io/fetch/https://externaldomain.com

【讨论】：

它的工作方式和我想要的完全一样，顺便说一句，使用 thingproxy 是否有限制，或者我在使用 thingproxy 时应该注意什么？

代理的作者要求不要过度使用它。如果您需要流量很大的东西，您应该制作自己的代理