vue-cli 3.0之跨域请求代理配置及axios路径配置
问题:在前后端分离的跨域请求中,报跨域问题
配置:
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,
然后使用谷歌浏览器查看获取数据正确