Published:
·
LastMod: November 21, 2022
·
877 words
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的问题
你学废了吗？
