1️⃣ vue-cli 代理解决办法

2️⃣ 方式一

image.png
image.png

2️⃣ 方式二

如果想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。

  1. module.exports = {
  2.   devServer: {
  3.     // proxy 对象可以配置多个代理
  4.     proxy: {
  5.       '/api': {
  6.         // 如果请求的地址中包含 "/api" 那么直接请求到配置的地址
  7.         target: 'https://localhost:4000',
  8.         pathRewrite: {
  9.           '^/api': ''
  10.         }, // 将 "/api" 替换成 "" 字符串
  11.         ws: true, // 用于支持 websocket
  12.         changeOrigin: true // 用于控制请求头中 host 的值
  13.       },
  14.       '/foo': {
  15.         target: '<url>', // 代理地址
  16.         pathRewrite: {'^/foo':''}, // 用户匹配字段为空 
  17.         ws: true, // 用于支持 websocket
  18.         changeOrigin: true // 用于控制请求头中 host 的值
  19.       }
  20.     }
  21.   }
  22. }
  1. // 在请求时要加上配置的前缀 ( /api )
  2. axios.get("http://localhost:8080/api/msg").then(()=>{})