Vue Axios跨域问题可以通过配置 /config/index.js中的 proxyTable 来解决,改动配置后需要重启项目 (运行npm run dev)
proxyTable: {
// 所有 /api请求的路由会走这个代理
'/api': {
changeOrigin: true, //跨域
target: 'http://www.lihuyong.com/'
},
// 所有 /ywapi请求的路由会走这个代理
'/ywapi': {
changeOrigin: true,
target: 'http://www.lihuyong.com/',
pathRewrite: { //重写路径
'^/api': '/abc/xxx' //例如: /api/getuser 会被重写为 /abc/xxx/getuser
},
onProxyReq: function (proxyReq, req, res) {
console.log("原路径:" + req.originalUrl, "代理路径:" + req.path)
}
}
}
这样打包后在生成环境会访问不到接口地址,为了方便打包后去除 ‘/api’,可以把 ‘/api’设成全局,在main.js中添加 Vue.prototype.api = process.env.NODE_ENV === ‘production’ ? ‘ ‘ : ‘/api’,调用接口的时候的url就可以写成api + ‘接口地址’
变个形:
proxyTable: {
'/api': {
changeOrigin: true,
target: 'https://www.lihuyong.com/',
pathRewrite: {
'^/api': ''
}
}
}, // 需要使用proxyTable代理的接口(可以跨域)
/* 接口文件 */
let baseurl;
let apiurl = {
login: "https://www.lihuyong.com/account/login.php",
getStatus: baseurl + "/userConfig/statusList"
}
export {
apiurl
}