1. 前言

1. 可能我们经常有场景 配置多个代理,但是在具体发起请求的时候 就不知道怎么发了,因为 axios中的baseurl只能配置一个,
2. 之前有文章vue-axios配置写过解决方案,但不是重点
3. 所以单独在写篇文章 config.js文件配置多个代理,axios如何发起请求,如何配置baseurl

---

2. 代理配置

1. config.js

  devServer:{
    open:true,
    host:"127.0.0.1",
    // host:"yzs.com",//host文件配置域名
    proxy:{
      "/dyapi":{
        target:"http://xx.x.cn/api/RoomApi",
        ws:true,
        ChangeOrigin:true,
        pathRewrite:{
          "^/dyapi":""
        }
      },
      '/elmapi':{
        // 不一定非得写域名/一般是写 所有接口前面 都一样的 部分/url
        target:'https://xx.xx.org',
        ws:true,
        changeOrigin:true,
        pathRewrite:{
          '^/elmapi':''
        }
      }
    }
  }

2. 配置多个代理

---

3. axios 二次封装

1. http.js文件

//************2. 创建实例 */
const instance = axios.create({
  baseURL: "/dyapi",
  // timeout: 1000,
  // headers: {'X-Custom-Header': 'foobar'}
});

2. 只配置了 一个常用的baseurl

---

4. 页面使用 dyapi代理的使用

• dyapi代理的使用

import request from '@/src/api/http.js';
export const getLiveList  = (params = {offset:0,limit:10})=>{
    return request.get("/live",{
        params
    })
}

1. 就是直接 使用
2. 因为 二次封装http.js里面 已经设置了baseURL: "/dyapi",
3. 实际请求效果: ``http://127.0.0.1:8081/dyapi/live?offset=0&limit=10`

---

5. 页面使用 elmapi代理

5.1 通用方式

1. 核心代码

import request from '@/src/api/http.js';
export const postLiveList  = (params ={name:"玩被"})=>{
    return request({
        url:"/v1/captchas",// 接口地址
        method:"POST" // 请求方式 
        baseURL:'/elmapi',// baseurl 
        data:params,// post请求参数
    })
}

2. 直接通用配置 的 baseURL:'/elmapi',
3. 这个优先级会高于 二次封装http.js里面的baseURL
4. 实际请求效果: http://127.0.0.1:8081/elmapi/v1/captchas

---

5.2 实例使用

1. 核心代码

import request from '@/src/api/http.js';
export const postLiveList  = (params ={name:"玩吧"})=>{
    return request.post("/v1/captchas",params,{
        baseURL:'/elmapi',
    })
}

2. 具体的post 实例 使用'
3. 注意参数的配置

---

6. 后记

1. 有些文章需要 专一一个知识点
2. 有些需要体系的总结

---

参考资料

vue-axios配置
axios中文--文档

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉