配置vite的proxy过程以及解决post请求403问题
更新时间：2025年12月04日 10:51:24 作者：莫鸣明
文章介绍了Vite项目中本地开发环境通过配置proxy代理实现跨域请求的方法,并解释了生产环境中该配置不生效的情况,通常使用nginx转发或后端配置CORS来解决,文章还指出,最终的请求地址是target加上rewrite重写的地址
1.前言
vite项目，本地开发环境可以通过配置proxy代理实现跨域请求。
但是生产环境，该配置不生效，一般使用 nginx 转发，或者后端配置cors
2.解释
server: {
port: 9000,
proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
// 正则表达式写法
'^/api': {
target: 'http://xxxx/xx', // 后端服务实际地址
changeOrigin: true, //开启代理
configure: (proxy, options) => {
// 解决请求403问题：invalid CORS request。非常重要的代码！！
proxy.on('proxyReq', function (proxyReq, req, res) {
proxyReq.removeHeader('referer') // 移除请求头
proxyReq.removeHeader('origin') // 移除请求头
})
},
// path是请求方法axios配置的baseUr中去除 协议+域名+端口 剩下的部分。例如http://127.0.0.1:9000/api，这里的path就是/api
rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
}
}
}
注意：最终的请求地址是 target + （rewrite重写的地址）
3.图解
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套，这篇文章主要介绍了Vue--Router--嵌套路由(children)的用法,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue基本指令实例图文讲解，文章将基本指令讲解的很清楚，有对于指令不太懂的同学可以跟着学习研究下2021-02-02
大家在写vue项目的时候会遇到给组件的各种命名，接下来通过本文给大家分享vue组件name的作用小结，感兴趣的朋友跟随脚本之家小编一起看看吧2018-05-05
idea配置vue运行命令时,scripts一栏始终为空问题
当IntelliJ IDEA配置Vue项目运行命令时,若scripts下拉列表为空,通常是因为IDEA未能正确识别或解析package.json文件,检查FileTypes配置、验证package.json文件内容与格式、刷新Node.js依赖与索引、检查Node.js解释器配置或手动创建运行配置等方法可以解决问题2026-05-05
这篇文章主要为大家详细介绍了vue实现弹窗拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了Vue中的混入的使用(vue mixins)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要给大家介绍了关于vue3标签中的ref属性详解及如何使用$refs获取元素的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-11-11
在vuejs中,我们经常使用axios来请求数据,但是有时候,我们请求的数据量很大,那么我们如何实现滑动滚动条来加载数据呢,接下来小编就给大家介绍一下在vuejs中如何实现滑动滚动条来动态加载数据,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vxe-list vue 如何实现下拉框的虚拟列表，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家介绍了Vue生命周期中的八个钩子函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
最新评论