axios代理跨域 cli4_vue-cli +axios 代理跨域问题

1、vue.config.js 配置如下：

var path = require('path');

const devProxy = ['...'];

var uatEnv= require('./config/uat.env'); // 测试环境

let env = process.env.NODE_ENV;

let target = '';

// 默认是本地环境

if(env==='test'){ // 测试环境

target = uatEnv.BASE_URL;

}else{ // 本地环境

...

}

// 生成代理配置对象

let proxyObj = {};

devProxy.forEach((value, index) => {

proxyObj[value] = {

target: target,

changeOrigin: true,

pathRewrite: {

[`^${value}`]: value

}

};

});

module.exports = {

baseUrl: '/',

outputDir: 'dist',

devServer: {

host: '0.0.0.0',

port: 8080,

https: false,

hotOnly: false,

disableHostCheck: true,

proxy: proxyObj,

before: app => {}

}

};

2、uat.config.js 的配置文件如下

'use strict';

module.exports = {

NODE_ENV: '"test"',

}

3.发送请求时的文件如下：

var url='/weixin/login?a='+a;

var that = this;

axios.get(url).then(r=>{}).catch(function (err) {

alert(err)

});

的请求时会出现跨域问题

5、解决办法

5-1，使用process.env.BASE_URL 拿到域名，在发送请求时加上域名，如：

var url=process.env.BASE_URL+'/weixin/login?a='+a;

var that = this;

axios.get(url).then(r=>{}).catch(function (err) {

alert(err)

});

可是在vue-cli 3.0 的脚手架里，我拿到的process.env.BASE_URL值时“/”,其它版本没试，但是process.env.NODE_ENV却能拿到正确的值.所以,只能换另一种方式。

5-2、在main.js 里定义全局变量 hostUrl，根据 process.env.NODE_ENV的值判断域名

var env = process.env.NODE_ENV;

var target = '';

// 默认是本地环境

if(env==='production'){ // 生产环境

target = "https:www.bbb.com";

}else if(env==='test'){ // 测试环境

target = "https:www.ccc.com";

}

window.hostUrl = target;

发送请求的url 加上 hostUrl 就能解决跨域问题。

var url=hostUrl +'/weixin/login?a='+a;

var that = this;

axios.get(url).then(r=>{}).catch(function (err) {

alert(err)

});