vue 代理配置proxy下pathrewrite失效踩坑

最新推荐文章于 2023-12-02 11:32:56 发布
最新推荐文章于 2023-12-02 11:32:56 发布
阅读量3k 收藏 1
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XD_NML/article/details/121426983
版权

从网上直接找到的代码复制过来报错，最后找了一下午为什么失效，最后发现问题直接破防了

错误：

pathRewrite: { 

          "  ^/api  "  : ""          //若请求的路径在目标url下但不在/api 下，则将其转换成空

        },

正确：

pathRewrite: { 

          "^/api": ""          //若请求的路径在目标url下但不在/api 下，则将其转换成空

        },

原因：

直接复制过来的 "  ^/api  "  : ""里面多了两个空格，判断url的时候就获取不到/api，删除空格就解决问题了

XD_NML
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue中使用proxy配置不同端口和ip接口问题
10-16
主要介绍了解决vue中使用proxy配置不同端口和ip接口问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue配置代理服务器proxy 多种方法
一步一个脚印，踏实努力，向着目标前进
07-05 2万+
代理服务器可以解决前端项目与后端API之间的跨域问题，简化开发配置，并方便调试。在使用代理服务器时需要根据具体的需求和场景来权衡利弊，选择合适的方式进行配置。以上是三种常见的配置代理服务器的方法，根据项目的具体情况选择适合的方法进行配置。需要注意的是，配置代理服务器时需要注意跨域问题，并且在开发环境中生效，在生产环境中需要使用其他方式进行代理配置。上述代码中，我们通过修改axios的默认配置来配置代理。表示代理的配置，包括代理服务器的地址、端口和协议。属性用于配置代理的规则，表示需要代理的接口路径，
VUE跨域的proxy中pathRewrite 详解
程序媛的博客
01-18 3558
当我们用vue-cli3 脚手架搭建完成后vue项目之后，项目的目录中是没有 vue.config.js 这个文件的，需要我们自己手动创建。我们只需要在在根目录中创建vue.config.js即可。
vue cli3 配置proxy代理无效的解决
10-16
今天小编就为大家分享一篇vue cli3 配置proxy代理无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue使用Proxy代理后仍无法生效的解决
01-21
vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑： 配置完代理后请一定重新执行（重要，非常重要！） npm run dev 若重新执行命令后，代理仍为生效，请按下方步骤进行检查： 检查index.js文件中的代理是否配置正确，示例如下： proxyTable: { '/api': { //代理标识 target: 'http://xxx.xxx.xxx',//指向的实际地址 changeOrigin: true, // 允许跨域 pathRewrite: { // 标识替换 // 原请求地址为 /api/getData 将'/api'替换''时
webpack配置proxyTable时pathRewrite无效的解决方法
10-17
主要介绍了webpack配置proxyTable时pathRewrite无效的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE解决跨域的proxyTable中pathRewrite 详解
m0_46083198的博客
02-08 2万+
VUE解决跨域的proxyTable中pathRewrite 详解 proxyTable: { '/api':{ target:'http://localhost:8083', // secure:true, changeOrigin:true, pathRewrite:{ "^/api":"" } } } 1.要理解pathRewrite，首先要明白proxyTable下‘
总结一个前端知识点 pathRewrite
weixin_32555599的博客
10-22 1万+
举个例子开头 一个前端vue中的配置，给出三种情况 配置文件 vue.config.js proxy: { '/api/test': { //这里最好有一个 / target: 'http://192.168.115.115:8888', // 后台接口域名 // ws: true, //如果要代理 websockets，配置这个参数 // secure: false, // 如果是https接口，需要配置这个参数
Vue项目配置代理proxyTable/pathRewrite
weixin_44477615的博客
01-01 1523
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 首先，在ProxyTable模块中设置了‘/api’，target中设置服务器地址，也就是接口的开头那段地址，例如‘172.
vue3请求代理proxy中pathRewrite失效
最新发布
Carmelo_7的博客
12-02 2705
在vue3配置请求代理proxy的时候pathRewrite失效及解决方案
webpack+vue-cil 中proxyTable配置接口地址代理操作
10-15
主要介绍了webpack+vue-cil 中proxyTable配置接口地址代理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
webpack使用proxy代理时pathRewrite不生效的分析
热门推荐
追风Programer的博客
12-21 3万+
目录   写在前面 概述前端打包工具 直入主题pathRewrite 写在前面 近日来，连续高压的做项目，都没时间来写点东西，今天浏览帖子时发现好多同学在问proxy使用pathRewrite重写路径时不生效的问题，一时兴起就想写篇文章告诉还不清楚的同学们。 概述前端打包工具 由于近些年来react、vue等MVVM框架的流行，使得前端的打包工具更倾向于webpack，相比传统的打...
proxy里的pathRewrite
weixin_43870259的博客
10-11 354
不论是vue.config.js还是vite.config.js中都有前端跨域的配置。以上内容来自：https://juejin.cn/post/7041441723238580238。注：在浏览器的DevTools中查看接口，并不能显示出来真实的代理路径。答：用代理首先你得有一个标识，表明你的这个连接要使用代理，不然的话。去掉，这样既能有正确的标识，又能在请求接口的时候去掉。可是不对呀，我正确的接口路径里面是没有。开头的才使用代理，所以接口都写成。,这是发起请求的服务地址。，最后代理的路径就是。
Vue代理配置重写方法(pathRewrite与rewrite)
Oooopkz的博客
10-25 3375
【代码】Vue代理配置重写方法(pathRewrite与rewrite)
vue 配置代理proxy
ljhhhkj的博客
04-20 805
（根目录下面创建vue.config.js ）此文件需要自己手动创建，记得注意pathRewrite不能忘记了。如果需要，配置多个服务器，复制粘贴即可，记得修改/api。在config目录中找到index.js。
proxy代理流程,pathRewrite的一些疑问
weixin_37835649的博客
09-22 2248
proxy代理流程解释.pathRewrite解析
vue跨域proxy详解(上)
lishuaihao的博客
08-17 8262
圈一和圈二的地方都是正则表达式，再配置proxy的时候一定要看清楚有没有加^符号或者^符号有没有加错，或者是不是写成了正则表达式里面的其他符号。
vue项目配置代理时pathrewrite失效
09-01
在Vue项目中配置代理时，经常会遇到pathRewrite无法生效的问题，下面我来解答你的问题。 在Vue项目中配置代理时，可以使用axios或者vue.config.js来实现。首先，我们需要在vue.config.js文件中配置代理，如下所示： module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } 上述代码表示将所有以/api开头的请求转发到http://localhost:8080地址，同时将路径中的/api替换为空字符串。如果你的代理路径和接口路径不一致，例如接口路径为/api/v1，那么需要修改pathRewrite配置为： pathRewrite: { '^/api': '/api/v1' } 在实际配置中，为了更好的兼容性，可以通过编写正则表达式来匹配不同的路径： pathRewrite: { '^/api': '' } 以上代码表示将路径中的/api替换为空字符串。 如果在配置了以上代理配置后，pathRewrite仍然无法生效，那么请检查以下几点： 1. 检查接口是否存在路径前缀，如果存在，请修改pathRewrite的配置。 2. 检查代理目标地址是否正确，确保请求能够正确转发。 3. 检查是否已经重启了Vue项目，部分配置需要重启才能生效。 希望以上解答对你有帮助，如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值