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项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

    Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

    文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一些配置项,如格式化表头日期、设置甘特图尺寸、启用只读模式、设置表格列等,感兴趣的朋友一起看看吧
    2025-02-02
  • vue内置指令详解

    vue内置指令详解

    指令是Vue模板中最常用的一项功能,它带有前缀v-,主要职责是当其表达式的值改变时,相应的将某些行为应用在 DOM 上。这篇文章主要介绍了vue内置指令详解,需要的朋友可以参考下
    2018-04-04
  • Vue项目获取url中的参数(亲测可用)

    Vue项目获取url中的参数(亲测可用)

    这篇文章主要介绍了Vue项目获取url中的参数,本文通过两种情况分析给大家详细介绍,感兴趣的朋友一起看看吧
    2022-08-08
  • vue中子组件传递数据给父组件的讲解

    vue中子组件传递数据给父组件的讲解

    今天小编就为大家分享一篇关于vue中子组件传递数据给父组件的讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue处理一千张图片进行分页加载思路详解

    vue处理一千张图片进行分页加载思路详解

    开发过程中,如果后端一次性返回你1000多条图片或数据,那我们前端应该怎么用什么思路去更好的渲染呢?这篇文章主要介绍了vue处理一千张图片进行分页加载,需要的朋友可以参考下
    2023-02-02
  • vue中使用v-if隐藏元素时会出现闪烁问题的解决

    vue中使用v-if隐藏元素时会出现闪烁问题的解决

    这篇文章主要介绍了vue中使用v-if隐藏元素时会出现闪烁问题的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue树形控件tree的使用方法

    vue树形控件tree的使用方法

    这篇文章主要为大家详细介绍了vue树形控件tree的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue 使用Props属性实现父子组件的动态传值详解

    Vue 使用Props属性实现父子组件的动态传值详解

    今天小编就为大家分享一篇Vue 使用Props属性实现父子组件的动态传值详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue elementui tree 任意级别拖拽功能代码

    vue elementui tree 任意级别拖拽功能代码

    这篇文章主要介绍了vue elementui tree 任意级别拖拽功能代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 详解el Cascader懒加载数据回显示例

    详解el Cascader懒加载数据回显示例

    这篇文章主要为大家介绍了详解el Cascader懒加载数据回显示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11

最新评论