proxy代理的使用（解决跨域，配置多个代理）

一、什么是代理？

字面意思可以理解为中间商，开启代理，原理就是在本地创建一个虚拟服务器，发送请求数据，同时接受请求的数据，利用服务器与服务器间，交互，不会有跨域问题，也是完全只靠前端自己独立解决跨域的方式。

以Vue-cli3实例

我现在需要请求的接口是如下：

https://www.baidu.com/api/search/get

然后我们在vue.config.js文件中设置proxy

  devServer: {
        proxy:{
          "/api": {
              target: "http://www.baidu.com", // 当我们发送请求时的URL中有/api时，会将在/api前面的路径替换成target的值。
              changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
              pathRewrite: {  //重写匹配的字段，如果不想出现在请求路径上，可以重写为""
                  "^/api": "/api"
              }
          },   
      },
  }

当我们创建Axios时，设置baseURL如下

    const service = axios.create({
      baseURL: /api, /* 定义请求路径的前缀 */
      timeout: 5000 /* 定义超时时间 */
})

创建的请求

    export function getData(){
        return request({
            url:"/search/get",
            method:"get"
        })
    }

此时你发送的请求路径会被拼接为target+baseURL+url

http://www.baidu.com/api/search/get

当你想要配置多个代理时，只需设置多个匹配字段即可

devServer: {
        proxy:{
          "/api": {
              target: "http://www.baidu.com", 
              changeOrigin: true,
              pathRewrite: { 
                  "^/api": "/api"
              }
          },
           "/user": {
              target: "http://www.baidu.com", 
              changeOrigin: true,
              pathRewrite: { 
                  "^/user": "/user"
              }
          },
      },
  }

创建Axios时，设置baseURL如下

    const service = axios.create({
      baseURL: /,
      timeout: 5000
})

创建的请求

    export function getData(){
        return request({
            url:"api/search/get",
            method:"get"
        })
    }
     export function getData1(){
        return request({
            url:"user/search/get",
            method:"get"
        })
    }