使用 Fetch API 时出现 CORS 问题 [重复]答案

【问题标题】：CORS issue when using Fetch API [duplicate]使用 Fetch API 时出现 CORS 问题 [重复]
【发布时间】：2018-11-11 05:39:28
【问题描述】：

我正在基于 Chalonge API 制作这个 JavaScript 项目。

每当我尝试使用 fetch 获取或发布任何数据时，都会返回臭名昭著的 CORS 错误：

CORS 策略已阻止从源“http://127.0.0.1:8080”获取“https://api.challonge.com/v1/tournaments.json?api_key=censored”的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

每当我使用“Allow-Control-Allow-Origin *”扩展程序时，它都能完美运行，但出于显而易见的原因，我不能要求我的客户下载此扩展程序来使用我的应用程序。我也尝试将项目上传到网络服务器，但没有成功。

我一直在网上搜索解决方案，但我要么太无能，无法在我面前看到答案，要么我看的时间不够长。

无论哪种方式，你们中的任何人都可以将我推向正确的方向吗？

编辑：我尝试将请求模式更改为 no-cors、same-origin 和 cors，但无济于事。

编辑 2：我看到的很多“修复”都围绕着更改服务器端 .htaccess 以允许我的域，但我不为 Challonge API 工作，我拒绝相信这是唯一的方式

【问题讨论】：

您需要在您控制的服务器上或使用第三方服务设置代理。在您自己的服务器上执行此操作的好处是可以保护您的 api 密钥
我正在使用一个扩展，它工作得很好。但是，您的意思是说，即使在生产中，我唯一的出路就是代理它？
是的。许多 API 没有实现 CORS，因此您最终不会暴露您的凭据。注意我假设你不控制那个 API
代理或在您请求的服务器上启用 CORS。阅读更多来自developer.mozilla.org/en-US/docs/Web/HTTP/CORS
你总是能够绕过限制它可能并不容易，要么从你可以通信的域发出请求，然后代理结果，要么你可以修补你的浏览器现在有这样的检查首先

标签： javascript rest api cors fetch

【解决方案1】：

我也遇到了同样的问题，经过数小时研究 CORS 的实际工作原理后，我得出的结论是，设置像 charlietfl 这样的代理建议是在本地开发时避免 CORS 问题的最佳方法。代理处理您在客户端上执行的每个请求，并将它们重新路由到原始目的地。这样你可能不会遇到任何 CORS 问题。

例如：https://github.com/marhaupe/node-react-bootstrap。

http://performantcode.com/web/do-you-really-know-cors

【讨论】：