vite如何在proxy代理中更改headers

 更新时间:2025年12月04日 10:43:54   作者:蚂蚁二娘  
文章介绍了在使用Vite进行代理时,如何解决多次设置Access-Control-Allow-Origin导致的跨域问题,通过在Vite的代理服务中重写响应头,可以有效解决问题,同时,也提到了使用Express和http-proxy-middleware的另一种解决方案

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解决跨域问题

  • 1.安装一个express
  • 2.安装cors中间件
  • 3.安装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

你学废了吗?

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue编写炫酷的时钟插件

    Vue编写炫酷的时钟插件

    这篇文章主要为大家详细介绍了Vue编写炫酷的时钟插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • vue路由切换之淡入淡出的简单实现

    vue路由切换之淡入淡出的简单实现

    今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue生命周期实例小结

    vue生命周期实例小结

    这篇文章主要介绍了vue生命周期,结合实例形式分析了vue.js生命周期相关原理、步骤、函数与操作注意事项,需要的朋友可以参考下
    2018-08-08
  • Vue多环境代理配置方法思路详解

    Vue多环境代理配置方法思路详解

    多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了。接下来通过本文给大家分享Vue多环境代理配置方法思路详解,需要的朋友可以参考下
    2019-06-06
  • Vue3中reactive丢失响应式的问题解决(避大坑!)

    Vue3中reactive丢失响应式的问题解决(避大坑!)

    这篇文章主要给大家介绍了关于Vue3中reactive丢失响应式的问题解决,vue3中reactive定义的引用类型直接赋值导致数据失去响应式 ,需要的朋友可以参考下
    2023-07-07
  • Vue.js组件tree实现省市多级联动

    Vue.js组件tree实现省市多级联动

    这篇文章主要为大家详细介绍了Vue.js组件tree实现省市多级联动的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Vue引用vee-validate插件表单验证问题(cdn方式引用)

    Vue引用vee-validate插件表单验证问题(cdn方式引用)

    这篇文章主要介绍了Vue引用vee-validate插件表单验证问题(cdn方式引用),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 在vue中使用el-tab-pane v-show/v-if无效的解决

    在vue中使用el-tab-pane v-show/v-if无效的解决

    这篇文章主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue3(vite)设置代理封装axios api解耦功能

    vue3(vite)设置代理封装axios api解耦功能

    这篇文章主要介绍了vue3(vite)设置代理封装axios api解耦,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • Vuex之module使用方法及场景说明

    Vuex之module使用方法及场景说明

    这篇文章主要介绍了Vuex之module使用方法及场景说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论