配置服务器代理

1. 思路 先将请求发送给本地的vue中的内置服务器 如果本地没有 就去目标服务器请求 主要看路径

2. 方式一 配置 在 vue.config.js中配置 参考 cli文档

   在vue.config.js中添加配置项
   devServer: {
   // 目标服务器 将 http://localhost:8080/test
   // 解析成 http://192.168.122.22:3000/test 去发送请求 成功后再转发给前端
   proxy: "http://192.168.122.22:3000",
   },

3. 方式一的缺点是 只能有一个目标服务器 无法配置多个服务器代理

4. 方式二 配置多个代理服务器

devServer: {
proxy: {
'/target1': {
target: 'http://localhost:3000', // 目标服务器地址
ws: true, // websocket
changeOrigin: true, // 是否改变ip原地址
pathRewrite:{ // 重写路径 将 /target1 替换成 ""
"^/target1":""
}
},
'/foo': {
target: 'url地址',
ws:true,
changeOrigin: true,
pathRewrite:{
"^/foo":""
}
}
}
}

5. 在组件中发送请求
   
   axios.get("http://localhost:8080/target1/test").then((res)=>{
   console.log( res);
   })

6. 特别注意 修改配置项后要重启 vue 服务