快捷導(dǎo)航

vite如何在proxy代理中更改headers

更新時(shí)間：2025年12月04日 10:43:54 作者：螞蟻二娘

文章介紹了在使用Vite進(jìn)行代理時(shí),如何解決多次設(shè)置Access-Control-Allow-Origin導(dǎo)致的跨域問題,通過在Vite的代理服務(wù)中重寫響應(yīng)頭,可以有效解決問題,同時(shí),也提到了使用Express和http-proxy-middleware的另一種解決方案

vite在proxy代理中更改headers

平時(shí)我們在對接接口時(shí)，我們都是配置代理解決跨域問題

 proxy: {
     '^/api': {
         target: envConfig.VITE_APP_BASE_URL,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^/api/, ''),
   }
 }

某天你明明配置好了代理，瀏覽器還是會有跨域問題報(bào)錯(cuò)

查看response header, 你會發(fā)現(xiàn)

 Access-Control-Allow-Origin: *, *

這里Access-Control-Allow-Origin不單是一個(gè)*

google后可以確定是這個(gè)請求頭被設(shè)置了2次*

和后端反饋后，很久啥也沒查出來，就是解決不了

那前端要怎么做呢？

思路1

在項(xiàng)目中重啟一個(gè)node服務(wù)，再做一次轉(zhuǎn)發(fā)，在轉(zhuǎn)發(fā)的過程中重寫這個(gè)response header解決跨域問題

1.安裝一個(gè)express
2.安裝cors中間件
3.安裝http-proxy-middleware進(jìn)行代理轉(zhuǎn)發(fā)

這里轉(zhuǎn)發(fā)的時(shí)候不能說直接都轉(zhuǎn)發(fā)了，你會發(fā)現(xiàn)還是有問題

 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
 }),
 });

這里一定要設(shè)置selfHandleResponse屬性，相當(dāng)于自定義返回結(jié)果

然后在監(jiān)聽onProxyRes回調(diào)函數(shù)的同時(shí)，使用responseInterceptor對返回進(jìn)行攔截

responseInterceptor內(nèi)部是一個(gè)異步函數(shù)，一定要使用async進(jìn)行修改，不然你會發(fā)現(xiàn)修改的沒有生效

但這樣還是太煩了，你還要維護(hù)另一個(gè)服務(wù)，而且配置的自定義變量也不好使用了。。。

思路2

從vite本身的代理服務(wù)入手，你想vite這種級別的工具，這種口子應(yīng)該留的呀

查詢文檔，沒有細(xì)說，只能查到有個(gè)configure方法可以重寫

打開vite源碼找一找

源碼中server下的middleware有個(gè)proxy, 就是代理中間件，就是我要找的

發(fā)現(xiàn)就是使用的一個(gè)社區(qū)庫

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

這個(gè)庫最近更新3年前。。。

我們這里要覆蓋response header

所以監(jiān)聽proxyRes方法，方法內(nèi)進(jìn)行操作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)
       });
     }
   },
 }
 },

這樣就可以解決返回頭中多次設(shè)置Access-Control-Allow-Origin的問題

同理你也可以更改request headers

你學(xué)廢了嗎？