vue的proxy代理使用

原理

vue 中的 proxy 就是利用了 Node 代理，原理还是因为服务器端没有跨域这一说嘛，也是用了这么一个插件 地址

一、proxy常用参数说明

module.exports = {
    publicPath: "/",
    devServer: {
        proxy: {
            "/api": {
                // 代理名称   凡是使用/api开头的地址都是用此代理
                target: "http://45.68.4.32:5000/", // 需要代理访问的api地址
                changeOrigin: true, // 允许跨域请求
                //ws: true,        //如果要代理 websockets，配置这个参数
                secure: false,  // 如果是https接口，需要配置这个参数
                pathRewrite: {
                    // 重写路径，替换请求地址中的指定路径
                    "^/api": "/", // 将请求地址中的/api替换为空，也就是请求地址中不会包含/api/
                },
            },
        },
    },
};

二、关于/api的详解

‘/api’：是指遇到这个字符开头的话，在这个字符前面加上target里面的ip或者域名。

举例：
①登录接口：http://1.2.3.4:5000/login
…中间省略了配置过程…
②npm run serve:Local: http://localhost:8080/
③点击后发送的登录请求：http://localhost:8080/api/login
④/api 的作用就是将/api前的localhost：8080变成target的内容http://1.2.3.4:5000/
⑤完整的路径变成了http://1.2.3.4:5000/api/login
⑥实际接口当中没有这个api，所以pathwrite重写就解决这个问题的。
⑦pathwrite识别到api开头就会把/api重写成空，那就是不存在这个/apil了，完整的路径又变成：http://1.2.3.4:5000/login

image.png

三、 使用场景

1、假设你要调取的接口是 http://e.dxy.net/api/test，然后你可以在本地调 localhost:8080/api/test，如axios.get('/api/test')

配置代理后，会做如下转发：
localhost:8080/api/test -> http://e.dxy.net/api/test
localhost:8080/bcma/api/test -> http://e.dxy.net/bcma/api/test

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://e.dxy.net',  // 后台接口域名
          ws: true,        //如果要代理 websockets，配置这个参数
          secure: false,  // 如果是https接口，需要配置这个参数
          changeOrigin: true,  //是否跨域
      }
  }
}

有新手朋友可能会问：这样做是不是只是本地调试这样做，线上怎么办呢？
我们一般调接口axios.get('/api/test')，这样调是自动请求的当前域名，也就是本地就调用 localhost:8080，到了线上就是你们自己的服务域名，所以这个只是为了本地调试使用。当然，如果你要同时调用很多个不同的域名服务，那你调用的时候就要把相关的域名明确写出来，如axios.get('http://e.dxy.net/api/test')

场景2

当你调接口后端的命名没有统一给接口前加 /api 这类的标识，那么你可以自己加，也就是你可以在本地调 localhost:8080/api/test，如axios.get('/api/test')，而你要的目标接口是 http://e.dxy.net/test，你就可以用 pathRewrite，遇到 /api 就去找代理 http://e.dxy.net 并且把 /api 重写为/。
所以转发效果就是：
localhost:8080/api/test -> http://e.dxy.net/test

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://e.dxy.net',  // 后台接口域名
          ws: true,        //如果要代理 websockets，配置这个参数
          secure: false,  // 如果是https接口，需要配置这个参数
          changeOrigin: true,  //是否跨域
          pathRewrite:{
              '^/api': '/'
          }
      }
  }
}

场景3

这个是对所有的接口都代理的，不止是检测到 /api 的接口，比如：
localhost:8080/api/test -> http://e.dxy.net/api/test
localhost:8080/test -> http://e.dxy.net/test

devServer: {
 proxy: 'http://e.dxy.net'
}

Vue CLI 配置参考