Vue-cli配置跨域代理
开发环境的跨域,就是在vue-cli脚手架环境下开发启动服务时,我们访问接口所遇到的跨域问题
vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题
这就是webpack的反向代理
在vue.config.js中配置
module.exports = {devServer: {// 省略前面的代码// 代理配置proxy: {// 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制// localhost:8888/api/abc => 代理给另一个服务器// 本地的前端 =》 本地的后端 =》 代理我们向另一个服务器发请求 (行得通)// 本地的前端 =》 另外一个服务器发请求 (跨域 行不通)'/api': {target: '', // 我们要代理的地址changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求// 路径重写pathRewrite: {// 重新路由 localhost:8888/api/login => /api/login'^/api': '' // 假设我们想把 localhost:8888/api/login 变成/login 就需要这么做 }},}}}
vue.config.js的改动如果要生效,需要进行重启服务