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+ element ui 表单验证有值但验证失败问题

    解决vue+ element ui 表单验证有值但验证失败问题

    这篇文章主要介绍了vue+ element ui 表单验证有值但验证失败,本文通过实例代码给大家分享解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • vue实现无缝轮播效果(跑马灯)

    vue实现无缝轮播效果(跑马灯)

    这篇文章主要为大家详细介绍了vue实现无缝轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • vue3手动删除keepAlive缓存的方法

    vue3手动删除keepAlive缓存的方法

    当我们未设置keepAlive的最大缓存数时,当缓存组件太多,会导致内存溢出,本文给大家介绍了vue3手动删除keepAlive缓存的方法,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • vue3渲染函数(h函数)的变更剖析

    vue3渲染函数(h函数)的变更剖析

    这篇文章主要介绍了vue3渲染函数(h函数)的变化,文中给大家介绍了h函数的三个参数详细说明及vue3 h函数-绑定事件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • VUE div click无效的问题及解决

    VUE div click无效的问题及解决

    这篇文章主要介绍了VUE div click无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue+vuex+axios+echarts画一个动态更新的中国地图的方法

    vue+vuex+axios+echarts画一个动态更新的中国地图的方法

    本篇文章主要介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • vue使用一些外部插件及样式的配置代码

    vue使用一些外部插件及样式的配置代码

    这篇文章主要介绍了vue使用一些外部插件及样式的配置代码,本文分步骤实例图文相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • vue3开启摄像头并进行拍照的实现示例

    vue3开启摄像头并进行拍照的实现示例

    本文主要介绍了vue3开启摄像头并进行拍照的实现示例,主要是使用navigator.mediaDevices.getUserMedia这个API来实现,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • Vue中设置el-select的高度不生效问题及解决方案

    Vue中设置el-select的高度不生效问题及解决方案

    文章介绍了如何使用ElementUI框架中的el-select组件,并解决设置其高度不生效的问题,在Vue2.x中,使用/deep/关键字可以穿透组件作用域修改样式;在Vue2.6+到Vue3初期,推荐使用::v-deep关键字;在最新的Vue3和构建工具中,推荐使用:deep()伪类来代替::v-deep
    2025-01-01
  • vue2项目导出操作实现方法(后端接口导出、前端直接做导出)

    vue2项目导出操作实现方法(后端接口导出、前端直接做导出)

    这篇文章主要给大家介绍了关于vue2项目导出操作实现方法的相关资料,文中介绍的是后端接口导出、前端直接做导出,通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-05-05

最新评论