前端 package.json 中的代理配置如何实现 void cors 请求？

Posted 2023-02-27

【中文标题】前端 package.json 中的代理配置如何实现 void cors 请求？

【英文标题】：How does a proxy config in frontend package.json a void cors request?

【发布时间】：2022-01-20 21:57:37

【问题描述】：

也许我还不太了解代理，但我的服务器后端位于 localhost:7000，前端客户端位于 localhost:3000。 现在我在我的前端 package.json 中配置了一个代理： "proxy": "http://127.0.0.1:7000" 。这避免了在后端安装 cors 并接受了对我的服务器的请求。这是如何工作的，或者为什么要避免使用 cors 配置？那么proxy和cors有什么区别呢？

【参考方案1】：

CORS 错误是由于在大多数浏览器中实现的same-origin policy 而发生的。更具体地说，您收到错误的原因是因为您正在向与您当前所在的来源不同的来源发出请求。在您的情况下，这是您在 http://localhost:3000 上运行的前端，它正在尝试访问 http://localhost:7000 上的后端

为了解决这个问题，您可以更改后端以发送包含前端来源的 Access-Control-Allow-Origin 响应标头 - 或者...您使用代理。

代理基本上试图通过假装您的后端位于同一来源localhost:3000 来欺骗浏览器，而在后台它正在从实际来源localhost:7000 访问资源。

您可以阅读此article，其中详细解释了它。

【讨论】：

您收到错误的原因是因为您正在向与当前所在的来源不同的来源发出请求。 一些跨域请求是 简单，但不会触发 CORS。