Vue脚手架代理跨域
1.官方参考:
如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
2.在根目录(package.json同级)下创建vue.config.js;
3.用commonjs的js模块化写法
module.exports={
devServer:{
proxy:{
'/api'{//名字随便取,加到url前面的,如果只有自己的api,可以直接在axios在Vue继承的时候写个baseURL:"/api'
target:'后台url',
ws:booleab,//是否使用websocket
changeOrigin:true,//这个是关键,看名字也知道,跨域的重点,允许代理服务器进行代理请求,
//同源策略是浏览器的,所以服务器不存在这样的问题
//因为这个/api是用来识别不同的target的标记,所以我们要替换它成空字符串,没有换的话,可以看cmd的proxy报错,路径问题
pathRewrite:{
'^/api':''
}
}
}
}
}
如果是多种的API,需要在每一次的get(),post()中的url前面加上/api(你取的名字),每一个/any,都可以匹配一个target,根据自己需求增加就行了,直接处理跨域开心的像个200斤的宝宝.