vue項目多個不同的服務(wù)器請求地址管理

在vue項目開發(fā)過程中，獲取不同的數(shù)據(jù)可能會出現(xiàn)需要請求多個不同服務(wù)器地址的域名，這個時候需要對不同域名的請求地址進(jìn)行管理以及跨域的代理。

一、單服務(wù)器域名地址的跨域代理和請求配置：

跨域配置：
在vue項目的vue.config.js文件中對devServer.proxy進(jìn)行配置，如下：

module.exports = {
    publicPath: './', // 默認(rèn)加載地址為當(dāng)前目錄下
    devServer:{
        hot: true,
        port: 8000, // 啟動端口
        open: true,  // 啟動后是否自動打開網(wǎng)頁
        proxy: {
            "/api/": {
                target: "http://XXXXX.com/",
                changeOrigin: true,
                pathRewrite: {
                '^/api': ''
                }
            }
        }
    }
}

axios請求封裝：
封裝axios請求的js文件中配置如下：

import axios from 'axios';

axios.defaults.baseURL = '/api'; // 默認(rèn)請求地址
// 其他配置此處省略......

// 封裝請求API
export function XXXAPI(data) {
    return axios({
        url: '/xxx/xxx/', // 接口地址
        method: 'post', // 請求方法
        data: data, // 參數(shù)數(shù)據(jù)
    })
}

// 需要調(diào)用接口時調(diào)XXXAPI即可

這是單一服務(wù)器請求地址的寫法，直接在axios.defaults選項中配置baseURL地址。

二、多服務(wù)器域名地址的跨域代理和請求配置：

多服務(wù)器域名的跨域配置：
同樣是在vue.config.js文件中對devServer.proxy進(jìn)行配置，如下：

module.exports = {
    publicPath: './', // 默認(rèn)加載地址為當(dāng)前目錄下
    devServer:{
        hot: true,
        port: 8000, // 啟動端口
        open: true,  // 啟動后是否自動打開網(wǎng)頁
        proxy: {
        	// 配置服務(wù)器地址一
            "/api/": {
                target: "http://XXXXX.com/",
                changeOrigin: true,
                pathRewrite: {
                '^/api': ''
                }
            },
            // 配置服務(wù)器地址二
            "/bpi/": {
                target: "http://XXXXX.com/",
                changeOrigin: true,
                pathRewrite: {
                '^/bpi': ''
                }
            }
        }
    }
}

// 多個服務(wù)器的跨域配置在proxy中添加多個類進(jìn)行設(shè)置

多個服務(wù)器地址的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, // 參數(shù)數(shù)據(jù)
    })
}

export function bbAPI(data) {
    return bbAxios({
        url: '/xxx/xxx/', // 接口地址
        method: 'post', // 請求方法
        data: data, // 參數(shù)數(shù)據(jù)
    })
}

// 需要調(diào)用接口時調(diào)封裝的API即可

多服務(wù)器請求地址的情況下，axios請求封裝中，需要根據(jù)不同的請求地址創(chuàng)建不同的axios對象，通過axios.create()設(shè)置不同的baseURL地址。在后續(xù)封裝請求API時，根據(jù)不同的接口使用不同的axios對象即可實現(xiàn)同一個vue項目請求不同的服務(wù)器地址。

END

如果對你有幫助，記得點個贊噢（~~）文章來源地址http://www.zghlxwxcb.cn/news/detail-762380.html

到了這里，關(guān)于vue項目多個不同的服務(wù)器請求地址管理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！