vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决

 更新时间:2023年02月13日 10:56:18   作者:cc_King  
Vue项目devServer.proxy代理配置详解的是一个非常常见的需求,下面这篇文章主要给大家介绍了关于vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决的相关资料,需要的朋友可以参考下

proxy 配置确认、解析

devServer: {
    https: true, // 开启https模式
    // 配置服务器代理
    proxy: {
      '/api': { // 匹配访问路径中含有 '/api' 的路径
        target: 'http://localhost:3000/', // 测试地址、目标地址
        changeOrigin: true,
        ws: true, // 是否开启 webSocket 代理
        pathRewrite: { // 请求路径重写
          '^/api': '',   //重写请求路径
        },
      }
    }
  },

原因 一

百度最多的解释

  • 配置写错了 (解决:复制粘贴上面的实例下去改)
  • 路径没有匹配上 (解决:看本文的详解部分)

原因二

这个原因得注意一下

  • 方式是给我们开发环境用的 ,其次是我们的请求要被开发服务器接收到,且不能匹配到请求,然后我们的请求就会被代理到配置的URL。
  • 注释掉,或者改为本地路径,否则代理不会生效

比如说我之前的全局 http.js 配置文件是这样写的

const http = axios.create({
  baseURL: 'http://localhost:3000/',
})

所以不论是 生产 还是 开发 环境下,我的请求都会发送给我们配置的baseURL,而不会走我们的代理!!!。

所以我们得修改一下配置,使我们的生产路径在生产环境下才生效

let baseURL = "/";
if (process.env.NODE_ENV === 'production') {
  baseURL = 'http://localhost:3000/';
}

const http = axios.create({
  baseURL,
})

这样在开发环境下,我们的 baseURL = "/", 代理就可以生效了。

注意

  • 还有一点就是,即使我们的代理生效了,但是在浏览器请求头中展示的也不是配置的代理地址;
  • 所以测的时候得多问问后端请求过去没有,或者自己node搭个简易的服务器看看成没成功;
  • 不要一根筋的死盯浏览器的请求头地址。

详解

请求路径必须带有标识!!!

proxy: {
      '/api': { 
      ...
      }
 }
  • 用代理首先你得有一个标识,表明你的这个连接要使用代理;
  • 不然的话 html css js 这些静态资源都跑去代理。
  • /api 就是告诉 node ,我接口用 /api 开头的才使用代理,所以接口都写成 /api/xx/xx
  • 出现问题: 请求路径没有 /api ,使用 pathRewrite 解决

pathRewrite

pathRewrite: { // 请求路径重写
    '^/api': '',   //重写请求路径
 },

pathRewrite的key值 ^/api 就是一个正则表达式。

pathRewrite的value值 为替换后的路径。

这里的话就是将匹配成功的地址当做一个字符串,然后执行 js 的 replace 方法,将执行成功的最终结果作为最后的请求路径。

  • 比如:
  • 我们有一个请求 axios.get("/api/aa/bb/cc") ;
  • 根据我们这里配置的 proxy, 带有 /api 的请求路径就需要进行代理,且 /api/aa/bb/cc 路径中含有 /api ,所以该请求就需要代理。
  • 将路径当做字符串执行, "/api/aa/bb/cc".replace(/^\/api/, "")
  • 执行结果: /aa/bb/cc
  • 最终的请求路径变成了 http://localhost:3000/aa/bb/cc 不含/api;

axios.get("/ee/ff/dd") 这个请求就不会进行代理,因为匹配不上我们预设的规则 (请求路径没有 /api

最终的请求路径变成了 http://localhost:3000/ee/ff/dd, 和原路径一致;

又比如说我们的配置为

pathRewrite: { // 请求路径重写
    '^/api': '/rewrite',   //重写请求路径
 }
  • 那么我们的请求 axios.get("/api/aa/bb/cc") ;
  • 会执行 "/api/aa/bb/cc".replace(/^\/api/, "/rewrite");
  • 最终的请求路径变成了 http:/rewrite/localhost:3000//aa/bb/cc;
  • 将 /rewrite 替换了开头的/api。

changeOrigin

假设,如果你的前端服务器是 http://localhost:3000,后端是 http://localhost:8082。

那么后端通过 request.getHeader(“Host”) 获取依旧是 http://localhost:3000。

如果你设置了 changeOrigin: true,那么后端通过 request.getHeader(“Host”) 获取才是 http://localhost:8082。代理服务器此时会根据请求的 target 地址修改 Host。

总结

到此这篇关于vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决的文章就介绍到这了,更多相关vue.config.js中devServer.proxy配置说明内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3+elementPlus项目支持生成、设置默认附件方式

    vue3+elementPlus项目支持生成、设置默认附件方式

    这篇文章主要介绍了vue3+elementPlus项目支持生成、设置默认附件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue仿ios列表左划删除

    vue仿ios列表左划删除

    这篇文章主要为大家详细介绍了vue仿ios列表左划删除,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 使用Vue指令实现Markdown渲染和代码高亮

    使用Vue指令实现Markdown渲染和代码高亮

    在前端开发中,我们经常需要将Markdown格式的文本渲染成HTML并展示在页面上,同时还希望能够对代码块进行高亮显示,今天我将分享一段代码,通过Vue指令实现了这个功能,需要的朋友可以参考下
    2023-09-09
  • 解决element-ui el-checkbox的一些坑

    解决element-ui el-checkbox的一些坑

    这篇文章主要介绍了解决element-ui el-checkbox的一些坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • element-ui使用导航栏跳转路由的用法详解

    element-ui使用导航栏跳转路由的用法详解

    今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue.js单页面应用实例的简单实现

    vue.js单页面应用实例的简单实现

    本篇文章主要介绍了vue.js单页面应用实例的简单实现,使用单页应用,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验。
    2017-04-04
  • 解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题

    解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题

    最近使用了Better Comments这款插件,发现在ts文件中可以显示对应的颜色,但在vue文件中并不显示对应颜色 ,下面小编给大家分享解决方法,感兴趣的朋友跟随小编一起看看吧
    2022-09-09
  • Django+Vue.js搭建前后端分离项目的示例

    Django+Vue.js搭建前后端分离项目的示例

    本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例,具有一定参考价值,有兴趣的可以了解一下
    2017-08-08
  • 详解vue3中websocket的封装与使用

    详解vue3中websocket的封装与使用

    这篇文章主要为大家详细介绍了vue3中websocket的封装与使用的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • vue3中使用百度地图的简单步骤

    vue3中使用百度地图的简单步骤

    最近项目要用到百度地图api,好久没用到地图,就百度了一番,下面这篇文章主要给大家介绍了关于vue3中使用百度地图的简单步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06

最新评论