Vue配置代理(devServer)解决跨域问题

 更新时间:2024年08月10日 10:49:53   作者:藏蓝色攻城狮  
这篇文章主要介绍了Vue配置代理(devServer)解决跨域问题,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

1、作用:

Vue官方文档的解释是:

如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

通俗的说,就是为了解决跨域问题。

2、用法:

本篇都以axios发请求为例,样例如下:

axios.get("/abc/def");
axios.get("/abc/ghi");
axios.post("/abc/jkm");

axios发送的请求是本地的服务器地址拼接上发送的请求,如 http://xxx:8080/abc/def

2.1 指定请求开头配置

如果发送的请求都以 /abc 开头,代理配置:

devServer: {
    proxy: {
      "/abc": {
        target: "http://XX.XX.XX.XX:8081",
        changeOrigin: true,
        ws: true,
        secure: false,
      },
    }
},
  • “/abc”:{} : 引号中代表,本代理配置,会检测以 /abc 开头的访问
  • target : 代表检测到以 /abc 开头的接口后,将请求中端口、地址,修改为后端接口地址,从而避免发生跨域问题
  • changeOrigin : 是否修改数据包中host参数,默认为true
  • ws : 是否代理 websockets
  • 该代理请求为:

http://localhost:8080/abc/def —> http://XX.XX.XX.XX:8081/abc/def

2.2 代理多个接口

请求示例:

// http://localhost:8080/zzz/one
axios.get("/zzz/one");
// http://localhost:8080/xxx/two
axios.get("/xxx/two");

代理多接口方式1

监测多个接口,可以在proxy中写多个配置

devServer: {
    proxy: {
        "/zzz": {
          target: "http://XX.XX.XX.XX:8082",
          changeOrigin: true,
          ws: true,
        },
        "/xxx": {
          target: "http://XX.XX.XX.XX:8083",
          changeOrigin: true,
          ws: true,
        },
    },
},

代理多接口方式2

配置axios

// 只要发送axios请求,就在请求前加入/api的开头,例如 /zzz/one -> /api/zzz/one
axios.defaults.baseURL = "/api"; 
/*
进行了上方的配置后,在本地发送的请求会变为
http://localhost:8080/api/zzz/one
http://localhost:8080/api/xxx/two
*/

配置代理

devServer: {
    proxy: {
        "/api": {
            target: "http://XX.XX.XX.XX:8084",
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              "^/api": "",
            },
        },
    },
},
//pathRewrite :检查代理的请求中是否有 /api ,有的话把 /api 替换为冒号后面的内容,案例为替换成空字符串,也就是删去 /api 。(^是正则表达式的内容,意思是限定开头)

3、常见参数

target:"xxx",            // 要使用url模块解析的url字符串
forward:"xxx",           // 要使用url模块解析的url字符串
agent:{},                // 要传递给http(s).request的对象
ssl:{},                  // 要传递给https.createServer()的对象
ws:true/false,           // 是否代理websockets
xfwd:true/false,         // 添加x-forward标头
secure:true/false,       // 是否验证SSL Certs
toProxy:true/false,      // 传递绝对URL作为路径(对代理代理很有用)
prependPath:true/false,  // 默认值:true 指定是否要将目标的路径添加到代理路径
ignorePath:true/false,   // 默认值:false 指定是否要忽略传入请求的代理路径
localAddress:"xxx",      // 要为传出连接绑定的本地接口字符串
changeOrigin:true/false, // 默认值:false 将主机标头的原点更改为目标URL

到此这篇关于Vue配置代理(devServer),解决跨域问题的文章就介绍到这了,更多相关Vue配置代理(内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue-preview动态获取图片宽高并增加旋转功能的实现

    vue-preview动态获取图片宽高并增加旋转功能的实现

    这篇文章主要介绍了vue-preview动态获取图片宽高并增加旋转功能的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue插槽slot详细介绍(对比版本变化,避免踩坑)

    Vue插槽slot详细介绍(对比版本变化,避免踩坑)

    Vue中的Slot对于编写可复用可扩展的组件是再合适不过了,下面这篇文章主要给大家介绍了关于Vue插槽slot详细介绍的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vue实例的选项总结

    vue实例的选项总结

    这篇文章主要介绍了Vue实例的选项有哪些,文中讲解非常细致,代码帮助大家更好的学习,感兴趣的朋友可以了解下
    2020-06-06
  • vue中keep-alive多级路由缓存问题

    vue中keep-alive多级路由缓存问题

    本文主要介绍了vue中keep-alive多级路由缓存问题,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue 更改连接后台的api示例

    vue 更改连接后台的api示例

    今天小编就为大家分享一篇vue 更改连接后台的api示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue如何在引入的el-tree前添加图标

    vue如何在引入的el-tree前添加图标

    这篇文章主要介绍了vue如何在引入的el-tree前添加图标问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue导入Echarts实现折线图

    Vue导入Echarts实现折线图

    这篇文章主要给大家介绍了关于vue+echarts实现折线图的方法与注意事项,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-12-12
  • vue项目百度地图如何自定义标注marker

    vue项目百度地图如何自定义标注marker

    这篇文章主要介绍了vue项目百度地图如何自定义标注marker问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue watch侦听器有无immediate的运行顺序问题

    vue watch侦听器有无immediate的运行顺序问题

    这篇文章主要介绍了vue watch侦听器有无immediate的运行顺序问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue中el-table条件渲染防止样式乱掉(解决方法)

    Vue中el-table条件渲染防止样式乱掉(解决方法)

    这篇文章主要介绍了Vue中el-table条件渲染防止样式乱掉问题,通过使用:key="Math.random()" 可解决样式错乱问题,此key属性是vue自带的特殊属性,主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes,依次来提升页面渲染性能,感兴趣的朋友一起看看吧
    2023-11-11

最新评论