在日常项目开发时，经常需要向服务器发送请求来获取数据，由于浏览器的同源策略限制，有时候会出现跨域的问题，这时候我们可以通过配置代理来实现请求的正常访问。

两种实现方法

1、在项目根目录下的 package.json 中配置：

"proxy": "http://localhost:8090",  // 需要请求的服务器地址

然后将需要发送请求的地方的接口地址改为你本地的地址，而不是远程服务器的地址，如：http://localhost:8081、 至此，发送请求就能够正常访问到数据了

总结

优点：配置简单，前端请求资源时可以不加任何前缀。

缺点：不能配置多个代理

工作方式：当请求了本地不存在的资源时，会将请求转发给 http://localhost:8090 （优先匹配前端资源）

2、通过编写 setupProxy.js 来配置

删除之前 package.json 中增加的配置项，在 src 目录下新建 setupProxy.js 文件

老版配置如下：

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

module.exports = function(app) {
  app.use(
    proxy('/api1', {
      target: 'http://localhost:3000',
      changeOrigin: true,
      pathRewrite: {'^/api1': ''}
    })
    // 增加多个配置
    proxy('/api2', {
      target: 'http://localhost:8090',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  );
};

然后在发送请求的地方增加 /api 字段，如原来请求地址是 http://localhost:3000/students, 现在改为 http://localhost:3000/api/students, 由于新增加了配置文件，所以需要重新启动项目，启动后，也许会出现新老版本不兼容问题，出现如下警告: DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the'setupMiddlewares' option.

如果出现这种警告，且项目不能正常启动，那么则应该更换新的配置，使用 createProxyMiddleware，配置如下：

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
      "/api1",  // /api1是需要转发的请求（所有带有/api1前缀的请求都会转发给3000）
      createProxyMiddleware({
          target: "http://localhost:3000", // 服务器地址
          changeOrigin: true,  // 控制服务器接收到的请求头中host字段的值，默认为false
          pathRewrite: {
              "^/api1": ""  // 去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
          }
      })
  );
  // 如果想配置多个代理，可以继续添加
  app.use(
      "/api2",
      createProxyMiddleware({
          target: "http://localhost:8088",
          changeOrigin: true,
          pathRewrite: {
              "^/api2": ""
          }
      })
  );
};

至此，重新启动项目，就会发现能够正常发送请求获取到数据了。

总结

优点：可以配置多个代理，能够指定哪些请求走代理

缺点：前端在请求时需要添加相应的前缀，配置相对繁琐。