vue开发过程中,我们在开发阶段,遇到后端接口跨域的问题,我们可以通过在vue.config.js中配置proxy来解决。
配置方案:
// 作为配置文件,直接导出配置对象即可
module.exports = {
devServer: {
port: 8888,
open: true,
// 此处为设置代理
proxy: {
'/api': {
// 你的真实的api地址,即真实接口地址
target: 'http://xxx.x.x.x:xxxx',
// 代理websocket
// ws: true,
changeOrigin: true,
// 重写路径
pathRewrite: {
'^/api': ''
}
}
}
}
}
配置axios的baseUrl
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'http://xxx.x.x.x:xxxx/';
}
完成上面的配置后,即完成代理的配置。
总结
那么当我们在开发阶段发送一个http://localhost:8888/api/list
请求,最终会被代理为http://xxx.x.x.x:xxxx/list
。
上面的配置就是把带有/api的请求映射到你的target请求上。