vue-cli proxy request principle

Vue is a popular JavaScript framework that can be used to create interactive web applications. During the development process, we usually use vue-cli to initialize a basic Vue project. vue-cli is a scaffolding tool officially provided by Vue. It provides many convenient functions, such as project initialization, packaging, publishing, etc.

However, we may encounter a problem during the development process: cross-domain requests. Due to the browser's same-origin policy, when we send a request on the front-end Ajax, we can only request server resources under the same domain name, but not server resources in other domain names. At this time, we can solve this problem through proxy requests in vue-cli.

So, how is the proxy request in vue-cli implemented?

The difference between direct request and proxy request

Before understanding the principle of proxy request, we need to understand the difference between direct request and proxy request. When we access the background service directly through Ajax requests during the development process, the request will be sent directly from the front end to the back end, as shown in the following figure:

This method will involve to cross-domain issues. If the back-end interface does not set a cross-domain response header, the browser will prohibit the front-end from initiating AJAX requests, causing the request to fail.

In vue-cli, we will solve this problem through proxy requests. The basic idea of ​​proxying requests is to send the request to the local server, which then forwards the request to the backend server.

Proxy configuration in vue.config.js

In the vue-cli project, we can set the proxy by configuring the vue.config.js file ask. In this file, we can set the devServer option and configure the proxy by setting the proxy object. The following is a simple example:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

In the above proxy configuration, we forward all requests under the /api path to the local http://localhost:8080 address.

Among them, the changeOrigin option is used to control whether the original host name in the request header needs to be changed.

In the proxy object, we can set multiple proxy addresses, for example:

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:8081',
        changeOrigin: true
      },
      '/api2': {
        target: 'http://localhost:8082',
        changeOrigin: true
      }
    }
  }
}

The /api1 and /api2 here represent forwarding respectively The request path, target attribute specifies the server address to be forwarded to.

Implementation Principle

After understanding the configuration of proxy request, let’s take a look at the implementation principle of proxy request.

First of all, when we initiate a request on the front end, the request will first be sent to the local server. After the local server receives the request, it will perform a series of processing on the request, including modifying the request header, modifying the request path, etc. The processed request is then forwarded to the backend server.

The flow chart is as follows:

It should be noted that in the local server, we need to set up proxy middleware, such as http-proxy- middleware. Proxy middleware is an interceptor similar to a response request, used to control the request process and modify the request content. We can implement proxy forwarding of requests by configuring proxy middleware.

Summary

Through the above introduction, we understand the principle of proxy request in vue-cli. Proxy request is a method to solve cross-domain problems on the front end. By forwarding the request to the local server, and then the local server forwards the request to the back-end server, the effect of cross-domain request is achieved. In vue-cli, we can set up proxy requests by configuring the vue.config.js file to achieve cross-domain requests on the front end.

The above is the detailed content of vue-cli proxy request principle. For more information, please follow other related articles on the PHP Chinese website!