The use of proxy agents (to solve cross-domain, configure multiple proxy)

The use of proxy agents (to solve cross-domain, configure multiple proxy)

First, what is the agent

The literal meaning is similar to the middlemen, open proxy, the principle is to create a virtual server locally, sending requested data, while receiving the requested data,

The use of servers and between servers, interactive, there will be no cross-domain issue, but also completely rely on their own independent front-end way to resolve cross-domain

Example with vue cli3

I now need to request a local interface

//  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"
          }
      },
  },
  }

In the creation of axios, beseURL this configuration

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

Request created

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

This match will be the agent to the target to go into this field, will be added to the target / earlier, according to pathRewrite, then you are requested ajax
meaning is probably your beseURL add your url request meets the matching proxy, then you the agency is no problem
handling while also matched part.
Such virtual server request is

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

But you see a local address request might look like this

Configuring multiple agents

Just let your local requests, agents can meet rules

    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"
          }
      },
   
  }, 

In the creation of axios, beseURL this configuration

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

Request created

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

The two interfaces, through a proxy request to the same interface. So to see if a better understanding of the agency. I doubt you can tell in the comments area.