Vuecli 文件vue.config.js 实现代理跨域

it2022-05-05  168

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斤的宝宝.


最新回复(0)