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

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

相关推荐
@大迁世界20 分钟前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙42 分钟前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump1 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD1 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~1 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
Jedi Hongbin2 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马2 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
liu****3 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San303 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
芒果茶叶4 小时前
并行SSR,SSR并行加载
前端·javascript·架构