为什么我们在创建反应应用程序时需要代理？答案

【问题标题】：Why do we need proxy in create react app?为什么我们在创建反应应用程序时需要代理？
【发布时间】：2021-12-27 18:12:24
【问题描述】：

在我在create-react-app遇到的一些项目中，人们使用文件setuProxy.js，里面有这样的内容：

const proxy = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    proxy("/api/mobile-activity/ws", {
      target: "http://localhost:3001/socket.io",
      pathRewrite: { "^/api/mobile-activity/ws": "" },
      ws: true,
    })
  );

  app.use(
    proxy("/api/vehicle-accident-protocols", {
      target: "http://10.1.1.24:7071",
      pathRewrite: { "^/api/vehicle-accident-protocols": "" },
    })
  );
};

我已经尝试阅读我们为什么需要这个，但我在网上找到的大多数解释都是关于如何做到这一点，很少他们清楚地解释我们为什么需要这个。有人可以以易于理解的方式解释我们为什么需要这个文件吗？我是网络基础设施等方面的初学者，这就是为什么我可能无法理解我们为什么需要它的原因。

【问题讨论】：

通常您使用开发代理来反映生产部署拓扑，同时仍获得开发服务器功能，如热重载。如果您直接从应用程序向其他服务发出请求，那么 1. 您需要在应用程序中进行配置（实际上它可能由服务发现/反向代理提供）；和 2. 你需要对这些服务进行 CORS 配置。
@jonrsharpe 因为我的 create react 应用程序是从不同的服务器（webpack 开发服务器）提供的，所以当我向 API 发出请求时我会收到 CORS 错误 not 位于 webpack 开发服务器上对吗？
我不会写一个完整的答案，不。老实说，在某一点上：如果您目前不需要它，为什么要担心它？
这不是具体问题。
@jonrsharpe 这不是特定的：“@jonrsharpe 因为我的创建反应应用程序是从不同的服务器（webpack 开发服务器）提供的，所以当我发出请求时会收到 CORS 错误不在 webpack 开发服务器上的 API 对吗？"？

标签： reactjs proxy create-react-app http-proxy-middleware

【解决方案1】：

通常，代理或代理服务器充当您的应用和互联网之间的网关。它是客户端和服务器之间的中间服务器，通过将客户端请求转发到资源。

在 React 中，我们经常在开发环境中使用这种代理。 React 使用 create-react-app（webpack 开发服务器）在开发模式下为应用提供服务。

Follow this link for more explanations

【讨论】：

啊，因为我的 create react 应用程序是从不同的服务器（webpack 开发服务器）提供的，所以当我向 API 发出请求时，我会收到 cors 错误 没有找到 在 webpack 开发服务器上是这样吗？
是的，你是对的。