为什么需要配置代理

    在开发过程中，我们是通过node启动了一个前端服务来运行我们的前端项目，当我们需要向后端发起网络请求的时候由于浏览器的同源策略，导致发送网络请求失败，这个时候就需要配置代理。
同源策略：域名、协议、端口相同。
    在生产上我们可以通过配置代理服务器，或者将项目直接部署到后端项目中，来运行我们的项目，这样就可以避免违反同源策略了。

react中配置代理

在react配置代理有两种方式：

1. 直接在package.json中配置
2. 在setupProxy.js配置文件中进行配置

方式一、直接在package.json中配置

在package.json中追加如下配置

"proxy":"http://localhost:8000"

说明：

1. 优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。
3. 工作方式：react项目默认启动的是3000端口，上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给8000 （优先匹配前端资源）

方式二、在配置文件中配置

1.第一步：创建代理配置文件
   在src下创建配置文件：

src/setupProxy.js

注意：setupProxy 文件名称是react脚手架默认名称，会默认加载这个配置，其他名字无效

2.编写setupProxy.js配置具体代理规则
由于这个文件是给react脚手架用的，所以这个文件使用的语言是cjs(common js)，另外改了任何脚手架相关的，都要重启服务。

// 引入代理模块
const {createProxyMiddleware} = require('http-proxy-middleware')
// 暴露配置
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api1', { // 所有api1的前端请求都会转发到 8000
      target: 'http://localhost:8000', // 转发目标地址
      changeOrigin: false, // 控制服务器接受请求头中的host的值，默认为false
      // changeOrigin: true 时 服务器不识别host,服务器接收到的host为localhost:8000
      // changeOrigin: false 时 服务器识别host,服务器接收到的host为localhost:3000
      // 当服务器限制请求源只能为8000时，我们需要设置为true，反之服务器不限制请求源，我们可以默认false
      pathRewrite: {'^/api1': ''} // 在请求转发之前，替换url内容，在这里我们替换/api1，替换成空
    }),
    createProxyMiddleware('/api2', {
      target: 'http://localhost:8001',
      changeOrigin: true, // 可以让服务端识别请求来源
      pathRewrite: {'^/api2': ''} // 重写api1，匹配成空
    }),
  )
}

说明：

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。