The use of proxy proxy in vue (to solve cross-domain problems)

statement

 1. First of all, we should know that if you do not write the full path of the request sent by the front-end axios locally, it will add the port where your project is located by default, for example:

axios.get('/login')

axios.get('/hello')

When I click the send button, the above two lines of code are actually:

http://localhost:8080/login

http://localhost:8080/hello

Among them, localhost:8080 is the address of your own project. The actual front-end will access the back-end program according to the above address.

2. Cross-domain, what is cross-domain?

First of all, understand what is the same-origin policy ? The same origin means that the protocol , domain name, and port must be the same, and any one of them will be cross-domain. For example:

http://www.baidu.com:8000

// http is the protocol

// www.baidu.com is the domain name

// 8000 is the port

Cross-domain means that browsers cannot execute scripts from other websites. It is caused by the browser's same-origin policy, which is a security restriction imposed by the browser on JavaScript.

Let me explain here that the inability to cross domains is the browser's consideration for user security. It's the browser's fault.

The same-origin policy restricts some behaviors: Cookie, LocalStorage and IndexDB cannot read DOM and JS objects, and Ajax requests cannot be sent out.

In the mode of separating the front and back ends, the domain names of the front and back ends are inconsistent, so there will be cross-domain problems.

question

After we have developed a front-end function, we need to run and debug. Usually, when the front-end and back-end are separated, after the two sets of programs are running, there will definitely be inconsistent protocols, domain names, and ports.

Then when the front-end calls the back-end interface, there will be cross-domain problems. How to do it? You need a proxy (proxy) to appear.

Cross-domain solutions

There are many solutions to cross-domain solutions, such as: jsonp, cors, Node proxy, nginx reverse proxy. Here we only discuss proxy.

The proxy in vue uses the Node proxy.

How does the proxy server resolve cross-domain issues?

 In this way, collusion is possible. When the front-end sends a request through axios, it will be sent to the local feature by default to the agent configured on the front-end. The agent converts the address to the back-end interface according to specific rules and requests the back-end interface. In this way, Solved the problem of cross-domain. How to configure the proxy server in the front-end vue?

proxy configuration

If I now want to request an interface on the backend, for example: http://www.aaabbbccc.com/login , how should we configure the proxy server?

Take vue cli3.0 as an example:

// vue.config.js
  devServer: {  //开启代理服务器
    proxy:{
      "/api": {  // /api是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会走到代理来。
          target: "http://www.aaabbbccc.com", // 需要代理的域名，目标域名，会替换掉匹配字段之前的路径
           ws: false, // 是否启用websockets
          changeOrigin: true, //是否跨域
          pathRewrite: {  //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
              "^/api": ""
          }
      },
   
  },
  }




  //vue cli2 .0 的放在 config文件夹中的index.js  中
    dev: {
    proxyTable:{
      "/api": {
          target: "http://www.aaabbbccc.com", // 需要代理的域名
           ws: false, // 是否启用websockets
          changeOrigin: true, //开启跨域
          pathRewrite: {  //重写请求路径上匹配到的字段，如果不需要在请求路径上，重写为""
              "^/api": ""，
             
          }
      },
  },
  }

In the above configuration, I configured an /api, and only the path containing this request will go through the proxy, for example:

http://localhost:8080/api/login //This can go through the proxy

http://localhost:8080/login //This will not work

It can be seen that if all requests enter the proxy, the path /api must be included. Then I can re-encapsulate axios and add this prefix to all requests. The code is as follows:

const requests = axios.create({
  
  baseURL:'/api', // 设置通用请求的地址前缀
  
  timeout:10000  //请求超时的时间
});
export default requests  //将requests实例，对外进行暴露

A send request can be written as:

requests.get('/login').then((response) => {})
requests.get('/getlist').then((response) => {})
requests.get('/user/hello').then((response) => {})

At this time, the request I sent is:

http://localhost:8080/api/login

http://localhost:8080/api/getlist

http://localhost:8080/api/user/hello

After processing through the target attribute of the proxy, it is:

http://www.aaabbbccc.com/api/login

http://www.aaabbbccc.com/api/getlist

http://www.aaabbbccc.com/api/user/hello

It is to change the path before /api to the path of the target server configured in target.

Replace /api with nothing through the pathRewrite attribute:

http://www.aaabbbccc.com/login

http://www.aaabbbccc.com/getlist

http://www.aaabbbccc.com/user/hello

In this way, you can access the corresponding interface of the backend.