vite 在proxy代理中更改headers
vite 在proxy代理中更改headers
平时我们在对接接口时，我们都是配置代理解决跨域问题
proxy: { '^/api': { target: envConfig.VITE_APP_BASE_URL, changeOrigin: true, rewrite: (path) => path.replace(/^/api/, ''), } } 复制代码某天你明明配置好了代理，浏览器还是会有跨域问题报错
查看response header, 你会发现
Access-Control-Allow-Origin: *, * 复制代码
这里Access-Control-Allow-Origin不单是一个*
google后可以确定是这个请求头被设置了2次*
和后端反馈后，很久啥也没查出来，就是解决不了
那前端要怎么做呢？
思路1
在项目中重启一个node服务，再做一次转发，在转发的过程中重写这个response header解决跨域问题
安装一个express
安装cors中间件
安装http-proxy-middleware进行代理转发
这里转发的时候不能说直接都转发了，你会发现还是有问题
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
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的问题
同理你也可以更改request headers
你学废了吗？
作者：JunIce
链接：https://juejin.cn/post/7168406888441184293