vue-cli 3 的 vue.config.js 多域名跨域本地代理配置

背景

在做項目時碰到了需要請求好幾個域名下的接口的情況，而接口是確定沒問題的，所以沒有后臺的同事介入，只能自己本地代理解決跨域的問題。

思路

在 devServer.proxy中配置多個域名的代理，然后在 pathRewrite中replace成''，這樣在請求后臺接口時如果匹配到相應的代理名，如：http://127.0.0.1:8088/passportapi/XXX/XXX， 實際上是http://127.0.0.1:8088/XXX/XXX，而反向代理又能夠實現(xiàn)本地代理而不出現(xiàn)跨域的情況，目的就達到了。

代碼

1. vue.config.js

module.exports = {
    runtimeCompiler: false,
    productionSourceMap: true,
    lintOnSave: true,
    filenameHashing: true,
    outputDir: 'dist',  // build打包后文件輸出地址
    assetsDir: 'static',
    configureWebpack: {
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                vue$: 'vue/dist/vue.esm.js',
                '@': resolve('src'),
                '@utils': resolve('src/utils'),
            },
        },
    },
    devServer: {
        port: 8088,
        host: '127.0.0.1',
        disableHostCheck: true,
        open: true,
        proxy: {
            '/passportapi': {
                target: 'https://aaaa.com',
                ws: true,
                changeOrigin: true,
                sesure: false,
                pathRewrite: {
                    '^/passportapi': ''
                }
            },
            'supportapi' : {
                target: 'https://bbbb.com',
                ws: true,
                changeOrigin: true,
                sesure: false,
                pathRewrite: {
                    '^/supportapi': ''
                }
            },
            '/lightapi': {
                target: 'https://cccc.com',
                ws: true,
                changeOrigin: true,
                sesure: false,
                pathRewrite: {
                    '^/lightapi': ''
                }
            }
        },
    },
};

2. request.js

import axios from 'axios';
axios.defaults.withCredentials = true;
const service = axios.create({
    baseURL: '/',
    timeout: 2000,
});
service.interceptors.request.use(
    (config) => {
        return config;
    },
    (error) => {
        console.log(error);
        return Promise.reject(error);
    },
);

service.interceptors.response.use(
    (response) => {
        const res = response.data;
        return res;
    },
    (error) => {
        console.log(`err${error}`);
        return Promise.reject(error);
    },
);

export default service;

3. api.js

import request from '@/utils/request';

export function testpass(data) {
    return request({
        url: '/passportapi/XXX/XXX',
        method: 'post',
        data,
    })
}

export function testsupport(data) {
    return request({
        url: '/supportapi/XXX/XXX',
        method: 'post',
        data,
    });
}
export function testlight(api) {
    return request({
        url: `/lightapi/XXX/XXX`,
        method: 'get',
    });
}

總結

上面的情況比較復雜，由于接口的風格統(tǒng)一，如：https://aaaa.com/api/XXX，https://bbbb.com/api/XXX，https://cccc.com/api/XXX，也就是說域名后面的名字是一樣的，所以需要多代理一層，也就導致axios請求的時候要/passportapi/api/XXX這么復雜，如果都不一樣，直接使用域名后面第一個單詞來做代理名區(qū)分，這樣axios也就只要/XXX就行，pathRewrite也不用了。