问题:在前后端分离的跨域请求中,报跨域问题
配置:
vue.config.js:
module.exports = {
devServer: {
port: 20110, // 端口号,如果端口号被占用,会自动提升1
host: "localhost", //主机名, 127.0.0.1, 真机 0.0.0.0
https: true, //协议
open: true, //启动服务时自动打开浏览器访问
proxy: {
‘/hzhxapi‘: {
target: ‘http://www.chengfeiting.com:20089‘,
changeOrigin: true,
pathRewrite: {
‘^/hzhxapi‘: ‘‘
}
},
‘/wixapi‘: {
target: ‘https://www.iocpleasing.com‘,
changeOrigin: true,
pathRewrite: {
‘^/wixapi‘: ‘‘
}
}
}
},
lintOnSave: false, // 关闭格式检查
productionSourceMap: false, // 打包时不会生成 .map 文件,加快打包速度
}
其中proxy设置了两个代理,一个代理hzhxapi,另外一个为/wixapi的代理,然后设置对应axios配置
import axios from ‘axios‘
const ts_url = ‘/hzhxapi‘;
const iocp_url = ‘/wixapi‘;
//axios.defaults.baseURL = iocp_url;
axios.defaults.cache = false;
const hx_request = axios.create({
baseURL: ts_url,
timeout: 100000
});
const wix_request = axios.create({
baseURL: iocp_url,
timeout: 100000
})
hx_request.cache = false;
iocp_request.cache = false;
wix_request.get(‘/_functions/ProjectList/991010‘)
.then(res => {
console.log(res.data)
})
.catch(err => {
console.error(err);
});
hx_request.get(‘/static/1.json‘)
.then(res => {
console.log(res.data)
})
.catch(err => {
console.error(err);
});
然后使用npm run serve,
然后使用谷歌浏览器查看获取数据正确

vue-cli 3.0之跨域请求代理配置及axios路径配置
原文:https://www.cnblogs.com/sttchengfei/p/12487410.html