Instructions for secondary encapsulation and proxy reverse proxy usage of vue-cil

Axios and proxy reverse proxy

Axios is a promise-based HTTP library that can be used in browsers and .

1. Features of Axios

• Create from the browserXMLHttpRequests
• Created fromhttpask
• supportPromise API
• Intercept requests and responses
• Convert request data and response data
• Cancel request
• Automatically convert JSON data
• Client-supported defense XSRF

2. Installation of Axios

npm i axios
# oryran add axios

3. Use of Axios and proxy reverse proxy

Import in the file () to be used

// This is the secondary assembly of axios// Import the downloaded packageimpront axios from 'axios'
// Create an axios instanceconst service = ({
    // Add the backend url interface to be connected to    // bassUrl: '<url>',
    // Set the timeout time    timeout: 3000
})
// Request for interception(config => {
    // You can add some response header information, etc.    
    return config
}) 
// Response to intercept(res => {
    ('Request to intercept', res)
    return res
})
// Exportexport default service

If you are connecting to multiple backend interfaces, the front-end application and the back-end API server are not running on the same host, you need to proxy the API request to the API server in the development environment, and write the following code in

// 
 = {
  devServer:{
      // Change the port number      port: 9550,
      // Whether to automatically open the browser      open: true，
      proxy: {
       // Here, when accessing a URL starting with /api, it will be proxyed to the target target          '/api': {
              target:'<url>',
              ws: true,
              changeOrigin:true，
              // Remove the path              pathRewrite: {
                  '^/api': ''
              }
          }
      }
  }
}

Note: Why do we need to re-modify the path? Because after sending the request, we will splice the previous one in the url. However, we do not need this to get the data, so we need to re-modify it and remove it; after removing it, we can get the data.

In the end, just import the service and then call it

Axios reverse proxy proxy personal understanding

Reasons for using reverse proxy proxy

First of all, you need to understand the same-origin policy of the browser. Homogen means that for example, the project address of your VUE is "http://localhost:8080", and the project startup address of your backend is "http://localhost:9999". The protocol (http) and domain name (localhost) are the same, but the port number (xxxx) vue is 8080, while the backend is 9999 is different, so cross-domain generation requires the use of reverse proxy. (If the two satisfy the same protocol, domain name, and port number, there will be no cross-domain problem).

In my personal understanding, the reverse proxy is to put a shell on you when you access the backend resources of the vue project, so that the browser will think that the request is the same, and the browser will not intercept it, and the data can be returned normally (similar to the principle of vpn).

Basic proxy configuration

 = {
    devServer: {
        proxy: {
            '/proxyurl':{
                target:'http://localhost:9999',//The url that plays a homologous role is simply the server you want to access.                //ws: true, this is to enable websocket                changeOrigin: true,//Literal meaning: Change the source point. Many people say that it is to enable cross-domain. It can also be understood this way.                pathRewrite: {
                    '^/proxyurl': '' //There is another way of writing it is '^/proxyurl': '/' Self-test                }
            }
        }
    }
}

//Writing the simplest example usage//The front-end project address is http://localhost:8080//The backend project address is http://localhost:9999    ("/proxyurl/user/getalluser").then(res => {
        (res);
    });

Explain this example:

Obviously, we accessed the backend resource through the vue project. Putting aside the proxy, we looked at this code, and requested the resource using http://localhost:8080/proxyurl/user/getalluser.

But with the reverse proxy, the reverse proxy sees that '/proxyurl' appears in your url. The reverse proxy works. Replace the previous url of '/proxyurl' http://localhost:8080' with 'http://localhost:9999'. At this time, the url of the requested resource becomes 'http://localhost:9999/proxyurl/user/getalluser'.

But we have configured another pathRewrite: {'^/proxyurl': ''}, '^/proxyurl' is a regular expression, which will match the string in your url. The code for this option means to replace '/proxyurl' in the url with an empty string. Then the current url is http://localhost:9999/user/getalluser

ps: Usually we will encapsulate axios, which can be written like this when creating an axios instance.

export function request(config){
    let axiosInstance = ({
        baseURL: '/proxyurl', //Piece the following url when calling        timeout: 5000
    });
    return axiosInstance(config);
}

The above is personal experience. I hope you can give you a reference and I hope you can support me more.