vue项目多个不同的服务器请求地址管理

在vue项目开发过程中，获取不同的数据可能会出现需要请求多个不同服务器地址的域名，这个时候需要对不同域名的请求地址进行管理以及跨域的代理。

一、单服务器域名地址的跨域代理和请求配置：

跨域配置：
在vue项目的vue.config.js文件中对devServer.proxy进行配置，如下：

module.exports = {     publicPath: './', // 默认加载地址为当前目录下     devServer:{         hot: true,         port: 8000, // 启动端口         open: true,  // 启动后是否自动打开网页         proxy: {             "/api/": {                 target: "http://XXXXX.com/",                 changeOrigin: true,                 pathRewrite: {                 '^/api': ''                 }             }         }     } } 

axios请求封装：
封装axios请求的js文件中配置如下：

import axios from 'axios';  axios.defaults.baseURL = '/api'; // 默认请求地址 // 其他配置此处省略......  // 封装请求API export function XXXAPI(data) {     return axios({         url: '/xxx/xxx/', // 接口地址         method: 'post', // 请求方法         data: data, // 参数数据     }) }  // 需要调用接口时调XXXAPI即可 

这是单一服务器请求地址的写法，直接在axios.defaults选项中配置baseURL地址。

二、多服务器域名地址的跨域代理和请求配置：

多服务器域名的跨域配置：
同样是在vue.config.js文件中对devServer.proxy进行配置，如下：

module.exports = {     publicPath: './', // 默认加载地址为当前目录下     devServer:{         hot: true,         port: 8000, // 启动端口         open: true,  // 启动后是否自动打开网页         proxy: {         	// 配置服务器地址一             "/api/": {                 target: "http://XXXXX.com/",                 changeOrigin: true,                 pathRewrite: {                 '^/api': ''                 }             },             // 配置服务器地址二             "/bpi/": {                 target: "http://XXXXX.com/",                 changeOrigin: true,                 pathRewrite: {                 '^/bpi': ''                 }             }         }     } }  // 多个服务器的跨域配置在proxy中添加多个类进行设置 

多个服务器地址的axios请求封装：
在封装的axios请求文件中配置如下：

import axios from 'axios';  const aaAxios = axios.create({     baseURL: '/api' })  const bbAxios = axios.create({     baseURL: '/bpi' })  // 封装请求API export function aaAPI(data) {     return aaAxios({         url: '/xxx/xxx/', // 接口地址         method: 'post', // 请求方法         data: data, // 参数数据     }) }  export function bbAPI(data) {     return bbAxios({         url: '/xxx/xxx/', // 接口地址         method: 'post', // 请求方法         data: data, // 参数数据     }) }  // 需要调用接口时调封装的API即可  

多服务器请求地址的情况下，axios请求封装中，需要根据不同的请求地址创建不同的axios对象，通过axios.create()设置不同的baseURL地址。在后续封装请求API时，根据不同的接口使用不同的axios对象即可实现同一个vue项目请求不同的服务器地址。

END

如果对你有帮助，记得点个赞噢（~~）