How to configure a proxy server in Vue (detailed explanation)

        Since you can read this article, it means that you already have a certain understanding of cross-domain, so here is no effort to introduce cross-domain in detail

       1. First of all, if you do not write the full path of the request sent by axios locally, it will add the port where your project is located by default, for example

axios.get('/student')
axios.get('/teacher')

        After clicking the send button, the above two lines of code are actually

http://localhost:8081/student
http://localhost:8081/teacher

        Where localhost:8081 is the address where your project is located.

        2. How does the proxy server solve cross-domain?

Therefore, when we use axios to send requests, it will be sent to the local feature by default to solve cross-domain problems

        3. How to configure the proxy server in vue, the code is very simple. 

  devServer: {       //开启代理服务器 (方式1)   配置多个代理
    proxy: {
      '/api': {       //'/api'是自行设置的请求前缀
        target: 'http://localhost:5000',
        pathRewrite:{'^/api':''},  //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
        ws: true,//用于支持websocket
        changeOrigin: true //用于控制请求头中的host值
      },
  }

        In the above code, I configure a request that matches all prefixes of /api, that is, all requests headed by /api will go through the proxy I configured above and send requests to the server http://localhost:5000 . But the two interfaces I wrote at the beginning are '/student' and '/teacher', they will not go through the proxy.

       4. How to solve it?

        We can use the secondary encapsulation of axios to add the /api prefix to all requests (this prefix can be named at will)

const requests = axios.create({
  //配置对象
  //基础路径，在发送请求时，路径当中会出现api
  baseURL:'/api',
  //代表请求超时的时间
  timeout:5000
});

        At this point we click the button to send the request as

http://localhost:8081/api/student
http://localhost:8081/api/teacher

After processing through the target attribute         of the proxy server, our original request becomes

http://localhost:5000/api/student
http://localhost:5000/api/teacher

        That is, replace the path before /api with the address of the target server. Because the /api prefix is ​​added by ourselves, we need to use pathRewrite  to rewrite /api to '' (empty)

http://localhost:5000/student
http://localhost:5000/teacher

        At this point, we can get the data normally.

Note: If in development, all requests we get have a common prefix, then we can omit the step of adding /api to all interfaces uniformly.

        Of course, there is a more concise way to let all requests go through the proxy instead of matching the prefix of the request.

  devServer:{
    proxy:'http://localhost:5000'  //开启代理服务器 (方式2) 5000端口指的是要向5000端口发送请求
  },

        But this will have flaws. If the resource you requested is available locally, it will directly return the local data without sending a request to the server. Therefore, it is recommended that you use method 1. Although it is troublesome, you can configure multiple proxies. There will be no situation where resources are returned directly from the local.