参考资料:
vue-cli 3.0之跨域请求devServer代理配置 // 这个讲得很清楚啦
建议去了解webpack和http-proxy-middleware感觉会比较清楚了
在vue.config.js文件(如果没有则创建)中配置:
module.exports = {
devServer: {
proxy: {
'/v1': {
target: 'http://192.168.1.33:9888', // 目标地址
changeOrigin: true, //是否跨域
ws: true,
//重写路径 需要设置重写的话,要在后面的调用接口前加上/v1 来代替target
pathRewrite:{
// '^/v1': '',
}
// 可配置多个,如果路径有多个的话
// '/v2': {
// target: 'http://192.168.1.33:9888', // 目标地址
// changeOrigin: true, //是否跨域
// ws: true,
//重写路径 需要设置重写的话,要在后面的调用接口前加上/v2 来代替target
// pathRewrite:{
// '^/v2': '',
// }
}
}
}
}
如果项目用的是axios,则在axios中配置,只要将baseURL配置为空字符串''
axios.create({ baseURL:'' })
如果axios的baseURL配置为'/v1', 那么需要在proxy中重写路径, 否则不能跨域
pathRewrite:{
'^/v1': '',
}
如果想要代理所有路径,那么可以在proxy中配置(将'/v1'改为'/):
proxy: {
'/': { // '/'匹配所有路径,所有请求都会被代理
target: 'http://192.168.1.33:9888',
changeOrigin: true,
ws: true
}
}
这样子就解决了跨域啦
PS: 这是其中一种不需要后台配合的解决跨域的方式,附上跨域解决方案链接,挺全的了: