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

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

一、什么是代理

字面意思就是类似中间商，开启代理，原理就是在本地创建一个虚拟服务器，发送请求数据，同时接受请求的数据，

利用服务器与服务器间，交互，不会有跨域问题，也是完全只靠前端自己独立解决跨域的方式

以vue cli3示例

我现在需要在本地请求接口

//  cli3     vue.config.js
  devServer: {
    proxy:{
      "/api": {
          target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
           ws: false, // 是否启用websockets
          changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求							的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite: {  //重写匹配的字段，如果不需要在请求路径上，重写为""
              "^/api": "/api"
          }
      },
   
  },
  }




  //cli2的放在config文件夹中的index.js  中
    dev: {
    proxyTable:{
      "/api": {
          target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
           ws: false, // 是否启用websockets
          changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求							的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite: {  //重写匹配的字段，如果不需要在请求路径上，重写为""
              "^/api": "/api"
          }
      },
  },
  }

在创建axios的时候，beseURL这样配置

const ajax = axios.create({
    baseURL:"/api",
    timeout: 6000,//请求超时时间
})

创建的请求

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

这样匹配到这个字段时就会代理到target去，将target添加到/前面，在根据pathRewrite,然后是你请求的ajax
意思大概就是，你的beseURL加上你请求的url满足proxy的匹配，那你的代理就是没问题的
同时处理的也是匹配到的部分。
这样虚拟服务器请求的的就是

http://www.xiongmaoyouxuan.com/api/search/home

但你本地看见的请求地址可能是这样的

配置多个代理

只需让你本地请求，满足代理的规则即可

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

在创建axios的时候，beseURL这样配置

const ajax = axios.create({
    baseURL:"/",
    timeout: 6000,//请求超时时间
})

创建的请求

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

上述2个接口，通过代理请求的是同一个接口。这样看是否更好的理解了代理。有疑问可以在评论区告诉笔者。