In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)-Vue.js-php.cn

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

藏色散人

Release： 2022-08-10 09:55:35

forward

3330 people have browsed it

1. Global configuration of axios

In actual project development, almost every component will be used axios initiates a data request. At this time, you will encounter the following two problems:

① Each component needs to import axios (bloated code)

② Every time you send a request, you need to fill in the complete request path (not conducive to Later maintenance) [Related recommendations: vue.js video tutorial]

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

2. How Global configuration axios

In the main.js entry file, mount axios globally through app.config.globalProperties. The sample code is as follows:

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

3. Global configuration of axios in the vue2 project

Needs to configure axios globally through the prototype prototype object of the Vue constructor in the main.js entry file

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

2. axios interceptor

1. What is an interceptor

Interceptors (English: Interceptors) will be automatically triggered every time an ajax request is made and a response is received.

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

2. Configure request interceptor

Pass axios.interceptors.request.use(successful callback, failure callback) Request interceptors can be configured. The sample code is as follows:

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

##2.1 Request Interceptor – Token Authentication

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

2.2 Request Interceptor – Display Loading effect

With the help of Loading effect component provided by element ui

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

3. Configure the response interceptor

You can configure the response interceptor through axios.interceptors.response.use (successful callback, failed callback). The sample code is as follows:

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

A practical example showing the Loading effect:

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

3. Proxy cross-domain proxy

1. Interface cross-domain problem

Solve cross-domain problem

1), Cors (the most standard processing) does not require front-end personnel to do any processing. Only the person who writes the server needs to add a few special response headers when returning the response in the server

2), Jsonp The most An ingenious solution is to use the src attribute in the script tag to not be restricted by the same-origin policy when introducing external resources. This feature is rarely used in development because it requires front-end and back-end personnel to complete it together, and it can only solve get requests. Cross-domain issues

3), proxy server

The proxy server is also a server. Its port number is consistent with our own. The communication between the two servers does not comply with the same origin policy restrictions. That’s it. This can solve the cross-domain problem. Therefore, when sending a request, the port number is also 8080

The address where the vue project runs: http://localhost:8080/

The address where the API interface runs : http://www.escook.cn/api/users

Since the current API interface does not enable CORS cross-domain resource sharing, by default, the above interface cannot request successfully!

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

2. Solve cross-domain problems of interfaces through proxies

When projects created through vue-cli encounter cross-domain problems with interfaces, they can be solved through proxies:

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

① Set the request root path of axios to the running address of the vue project (interface requests no longer cross domain)

② vue The project finds that the requested interface does not exist, and forwards the request to the proxy agent

③ The proxy replaces the request root path with the value of the devServer.proxy attribute and initiates a real data request

④ The proxy forwards the request The received data is forwarded to axios

3. Configure proxy in the project

Step 1. In the main.js entry file, change the request root path of axios to the current web project Root path:

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

Step 2, create the vue.config.js configuration file in the project root directory , and declare the following configuration:

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

##① The proxy provided by devServer.proxy Function, only effective during the development and debugging phase

② When the project is launched online, the API interface server still needs to be enabled for CORS cross-domain resource sharing

Usage method 1 Configure the proxy server There are two imperfections ：

1. Cannot flexibly control whether to use the proxy server

The public folder is equivalent to the root path of the 8080 server (what is in the 8080 server depends on the public file What is in the folder) When the requested resource 8080 itself has it, the request will not be forwarded to the 5000 server

2. Multiple proxies cannot be configured, and the request can only be forwarded to the 5000 server

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

Use method 2 to open the proxy server '/api' request prefix

Function: When a local request is sent to the proxy When using the server, the proxy server will determine whether the prefix of the request is '/api'. If it is, the request will be sent (forward the request to 5000). If not, the request will not be sent. You can flexibly control whether to use the proxy server ('/api' It is not a fixed value and can be customized as '/hah', etc.)

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

The carrying position of the prefix: immediately follows the port number

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

If you directly request this, it will cause a 404 error because when sending the request to the 5050 server, it still carries /api/ students, the 5050 server has students but does not have /api/students

Adding this configuration can ensure that when the proxy server sends a request to the 5050 server, only /students is sent to get the data

In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text)

ws role: used to support websocket

changeOrigin: (used to control the value of host in the request header)

When changeOrigin: true, the proxy server will indicate that it is also a 5050 server

When changeOrigin: false, the proxy server indicates that it is an 8080 server

Sometimes the 5050 server will There are some restrictions, so this configuration item is best set to true.

If ws and changeOrigin are not written, the default value is also true (if not written as false in react)

The above is the detailed content of In-depth analysis of axios global configuration, interceptors and proxy cross-domain proxy (picture and text). For more information, please follow other related articles on the PHP Chinese website!