vite配置代理中变更请求头 🔗

平时我们在对接接口时，我们都是配置代理解决跨域问题

1
2
3
4
5
6
7
proxy: {
    '^/api': {
        target: envConfig.VITE_APP_BASE_URL,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
    }
}

某天你明明配置好了代理，浏览器还是会有跨域问题报错

查看response header, 你会发现

1
Access-Control-Allow-Origin: *, * 

这里Access-Control-Allow-Origin不单是一个*

google后可以确定是这个请求头被设置了2次*

和后端反馈后，很久啥也没查出来，就是解决不了

那前端要怎么做呢？

思路1 🔗

在项目中重启一个node服务，再做一次转发，在转发的过程中重写这个response header解决跨域问题

安装一个express
安装cors中间件
安装http-proxy-middleware进行代理转发

这里转发的时候不能说直接都转发了，你会发现还是有问题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const { createProxyMiddleware, responseInterceptor } = require('http-proxy-middleware');

const proxy = createProxyMiddleware({
  selfHandleResponse: true, 
  onProxyRes: responseInterceptor(async (responseBuffer, proxyRes, req, res) => {
      res.removeHeader("Access-Control-Allow-Origin")
      res.setHeader("Access-Control-Allow-Origin", "*")
      return responseBuffer
  }),
});

这里一定要设置selfHandleResponse属性，相当于自定义返回结果

然后在监听onProxyRes回调函数的同时，使用responseInterceptor对返回进行拦截

responseInterceptor内部是一个异步函数，一定要使用async进行修改，不然你会发现修改的没有生效

但这样还是太烦了，你还要维护另一个服务，而且配置的自定义变量也不好使用了。。。

思路2 🔗

从vite本身的代理服务入手，你想vite这种级别的工具，这种口子应该留的呀

查询文档，没有细说，只能查到有个configure方法可以重写

打开vite源码找一找

源码中server下的middleware有个proxy, 就是代理中间件，就是我要找的

发现就是使用的一个社区库

http-party/node-http-proxy: A full-featured http proxy for node.js (github.com)

这个库最近更新3年前。。。

我们这里要覆盖response header

所以监听proxyRes方法，方法内进行操作res的headers

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server: {
  port: 3008,
  open: true,
  proxy: {
    '^/api': {
      target: envConfig.VITE_APP_BASE_URL,
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
      selfHandleResponse: true,
      configure: (proxy, _options) => {
        proxy.on('proxyRes', (proxyRes, req, res) => {

          res.removeHeader("Access-Control-Allow-Origin")
          res.removeHeader("access-control-allow-origin")
          res.setHeader("Access-Control-Allow-Origin", "*")
          res.setHeader("content-type","application/json")

          proxyRes.pipe(res)
        });
      }
    },
  }
},

这样就可以解决返回头中多次设置Access-Control-Allow-Origin的问题

你学废了吗？

vite 代理中更改请求头问题

vite配置代理中变更请求头 🔗

思路1 🔗

思路2 🔗