配置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.图解
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇在vue中多次调用同一个定义全局变量的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了Vue.js第三天的学习笔记，vue.js计算属性computed,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了vue实现超过两行显示展开收起的代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结2022-08-08
这篇文章主要介绍了vue使用路由router-view的相关知识,其原理就是采用 SPA(single-page-application) 模式,就是只有一个 Web 页面的应用,通过 router 来控制页面的刷新和迭代,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了vue-cli创建的项目中的gitHooks原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
vue插件mescroll.js实现移动端上拉加载和下拉刷新
这篇文章主要介绍了vue插件mescroll.js实现移动端上拉加载和下拉刷新，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了Vue.js实现文件上传压缩优化处理,本文给大家介绍两种方法一种是借助canvas的封装的文件压缩上传，二是使用compressorjs第三方插件实现，本文给大家介绍的非常详细需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue-router中path的设置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
Vue是一套用于构建用户界面的渐进式JavaScript框架,是目前最火的前端框架之一,是前端工程师的必备技能,下面这篇文章主要给大家介绍了关于Vue3.2.x中的小技巧及注意事项的相关资料,需要的朋友可以参考下2022-04-04
最新评论