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

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

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

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

跨域配置:

在vue项目的vue.config.js文件中对devServer.proxy进行配置,如下:

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

axios请求封装:

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

javascript 复制代码
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进行配置,如下:

javascript 复制代码
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请求文件中配置如下:

javascript 复制代码
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

如果对你有帮助,记得点个赞噢(~~)

相关推荐
aha-凯心3 分钟前
vben 之 axios 封装
前端·javascript·学习
漫谈网络6 分钟前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
失落的多巴胺2 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear2 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息2 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月2 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu2 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20182 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿2 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘2 小时前
vue文本插值
javascript·vue.js·ecmascript