webpack Proxy原理 和 跨域的解决方案

Proxy原理 

增加一层中间服务器（中间件），帮忙发送请求和接收返回。

跨域的产生：详细的就不写了，就单纯写为什么下面的案例会跨域，假如 3001端口请求3000端口段都的资源，就会产生跨域。跨域的产生是浏览器的问题（安全策略），所以，配置proxy也必然是针对浏览器的。

配置proxy就能解决，是因为，增加一层 中间服务器，把请求发给中间服务器，服务器帮你发给 3000端口，当接收到3000端口返回数据后，中间服务器再帮发给3000端口。

// webpack.config.js

module.exports = {
  // ...
  devServer: {
    // ...
    proxy: {
      // 代理路径匹配规则
      "/api": {
        // 代理的目标地址
        target: "http://localhost:3000",
        // 是否修改host头部
        changeOrigin: true,
        // 路径重写，将API请求重定向到代理路径的根路径下
        pathRewrite: { "^/api": "" }
      }
    }
  }
}

解决跨域的方法：

1、客户端配置 proxy 

webpack： 就是上面的。

Umi:   .umirc.ts 或 .umirc.js 文件中添加 proxy 配置项 。跟webpack的一样

Vite：  在Vite的配置文件（vite.config.js）中添加以下代码：

export default {
  server: {
    proxy: {
      // 将指定路径的请求代理到目标地址，并添加跨域请求头
      // 请求路径是 "/api"，代理到 "http://localhost:3000"
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Headers': '*'
        },
      },
    },
  },
};

2、 服务器端配置

返回的数据头增加  'Access-Control-Allow-Origin': '*'

devServer: {
  // ...
  headers: {
    'Access-Control-Allow-Origin': '*'
  }
}