前言：

在開發(fā)中，有可能遇到每部分的功能的需要調(diào)用另一臺(tái)服務(wù)器的地址。這個(gè)時(shí)候就需要設(shè)置不同的請(qǐng)求前綴首先代理到不同的服務(wù)器地址。

一、axios封裝實(shí)例以及代理：(不是完整的封裝實(shí)例，重點(diǎn)在于baseURL的區(qū)別)

文件路徑：/CMDB/src/utils/request.js

import axios from 'axios';


const defaultConfig = {
  timeout: 5 * 1000,
  baseURL:'/api'  // 注意?。?這里是全局統(tǒng)一加上了 '/api' 前綴，也就是說(shuō)所有接口都會(huì)加上'/api'前綴在，頁(yè)面里面寫接口的時(shí)候就不要加 '/api'了，否則會(huì)出現(xiàn)2個(gè)'/api'，類似 '/api/api/user'這樣的報(bào)錯(cuò)，切記??！
};

const instance = axios.create(Object.assign({}, defaultConfig));

instance.interceptors.request.use(
  function (config) {
    ...
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);
instance.interceptors.response.use(
  function (response) {
    ...
  },
  function (error) {
    ...
    return Promise.reject(error);
  }
);
export default instance;

代理的時(shí)候有兩個(gè)前綴，根據(jù)前綴代理到不同的服務(wù)器 (我這里是vite的配置)

server: {
  host: '0.0.0.0',
  //tip: when change this, you may need to change src/config either.
  proxy: {
    '/api': {
      // http://192.168.31.53:5173/
      target: 'http://192.168.31.199:18777/',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    },
    '/app': {
      target: 'http://125.124.5.117:12877/',
      changeOrigin: true
    }
  }
}

二、第一種：請(qǐng)求的時(shí)候傳入?yún)?shù)覆蓋默認(rèn)的baseUrl

import request from '@/src/utils/request.js'

// 獲取IP列表 (這個(gè)會(huì)默認(rèn)用前綴 '/api')
export const getList = data => {
  return request({
    url: '/ipv6/list',
    method: 'post',
    data
  });
};


// 獲取IP列表  （手動(dòng)加另一個(gè)前綴 '/app'）
export const getList = data => {
  return request({
    url: '/ipNetin/list',
    baseURL: '/app', // 這個(gè) baseURL 會(huì)覆蓋實(shí)例中默認(rèn)的 baseURL
    method: 'post',
    data
  });
};

三、第二種：新封裝一個(gè)axios實(shí)例

文件路徑：/CMDB/src/utils/preAppRequest.js

import axios from 'axios';


const defaultConfig = {
  timeout: 5 * 1000,
  baseURL:'/app' 
};

const instance = axios.create(Object.assign({}, defaultConfig));

instance.interceptors.request.use(
  function (config) {
    ...
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);
instance.interceptors.response.use(
  function (response) {
    ...
  },
  function (error) {
    ...
    return Promise.reject(error);
  }
);
export default instance;

需要請(qǐng)求到前綴 /api?的服務(wù)器的時(shí)候 就引入 request 實(shí)例

需要請(qǐng)求到前綴 /app 的服務(wù)器的時(shí)候 就引入 preAppRequest 實(shí)例 如：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-765176.html

import request from '@/src/utils/preAppRequest.js'

// 獲取待辦列表
export const getList = data => {
  return request({
    url: '/app/vlanNetin/list',
    method: 'post',
    data
  });
};

到了這里，關(guān)于axios 多個(gè)baseURL配置、實(shí)現(xiàn)不同前綴代理到不同的服務(wù)器的幾種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！