GET 请求从浏览器和邮递员工作，但在 React App 中从本地主机失败，端点是否必须添加访问控制允许来源？

Question

我正在从事一个项目，在该项目中我获得了一个端点来获取一些数据。 我将该端点的 url 放在浏览器中，并且按预期看到了 JSON。 我在 Postman 中提出了同样的请求，我得到了预期的结果。 然后，在 React 应用程序中使用来自localhost fetch或axios发出请求，当我在浏览器中运行该应用程序时，我得到：

从源“ http://localhost:3000 ”获取“ https://providedurl/path ”的访问已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。 如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我只是想确保我对此无能为力？ 是修改端点以添加Access-Control-Allow-Origin标头的唯一解决方案，还是可以从请求端完成某些操作？

Answer 1

CORS（跨域资源共享）是服务器说“我会接受你的请求，即使你来自不同的来源”的一种方式。 这需要服务器的合作——因此如果您无法修改服务器（例如，如果您使用外部 API），则此方法将不起作用。

修改服务器以添加头 Access-Control-Allow-Origin: * 以启用来自任何地方的跨域请求（或指定域而不是 *）。 这应该可以解决您的问题。

但是您可以在 Postman 和浏览器中访问它，如果您可以在浏览器级别禁用 CORS，它将起作用。

在 Chrome 中禁用 CORS：

1. 为chrome浏览器创建一个新的快捷方式并重命名为“anyname(disablecors)”

2. 右键单击新创建的快捷方式并选择属性

3. 在您的系统中创建一个任何名称的文件夹（tempchrome）。

4. 选择快捷选项卡并将目标添加为 ""[PATH_TO_CHROME]\\chrome.exe" --disable-web-security --disable-gpu --user-data-dir="tempchrome 的路径""

5. 单击应用并保存。

6. 在新创建的 chrome 快捷方式（disablecors）中打开您的应用程序

Answer 2

如果前端在端口 3000 上运行而后端在 5000 上运行，另一个快速解决方法是应用代理。 它是这样的。 将以下依赖项放入您的客户端包中：

  "proxy": "http://localhost:5000",

然后使请求相对，而不是绝对。 应该使用此设置。