Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "axios secondary encapsulation and proxy reverse proxy how to use", the content is detailed, the steps are clear, the details are handled properly, I hope this article "axios secondary encapsulation and proxy reverse proxy how to use" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Axios and proxy reverse proxy

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

1. Characteristics of Axios

Create a XMLHttpRequests from a browser

Create a http request from node.js

Support for Promise API

Intercept requests and responses

Convert request data and response data

Cancel the request

Automatic conversion of JSON data

Client supports defense against XSRF

2. Installation of Axios npm I axios# or the use of yran add axios3, Axios and proxy reverse agents

Import in the file you want to use (request.js)

/ / this is to implement the second sub-package of axios / / Import and download the package impront axios from 'axios'// to create axios instance const service = axios.create ({/ / add the backend url interface / / bassUrl:'' / / set timeout timeout: 3000}) / / request interception service.interceptors.request.use (config = > {/ / you can add some response header information and other return config}) / / response interception service.interceptors.response.use (res = > {console.log ('request interception', res) return res}) / / Export export default service

If you are docking multiple back-end interfaces and 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. Write the following code in vue.config.js

/ / vue.config.jsmodule.exports = {devServer: {/ / change the port number port: 9550, / / whether to automatically open the browser open: true Proxy: {/ / here the url that starts with / api will be proxied to the target target'/ api': {target:'', ws: true, changeOrigin:true / / modify the path pathRewrite: {'^ / api':'}

Note: why do you need to modify the path again, because there is an extra'/ api'in the url after sending the request, but we don't need this to get the data, so you have to modify it and remove it; after removing it, you can get the data.

If you need it in the last place, just import service and call it.

Axios reverse proxy proxy personally understands the reasons for using reverse proxy proxy

First of all, you need to understand the same origin policy of the browser. For example, the project address of your VUE is "http://localhost:8080"," and the launch address of your backend project is' http://localhost:9999 ", where the http and localhost are the same, but the port number (: xxxx) vue is 8080, while the backend is 9999 different, so you need to use a reverse proxy to generate cross-domain. (there is no cross-domain problem if the two meet the same protocol, domain name and port number.)

Reverse proxy in my personal understanding is to give you a shell when the vue project accesses the back-end resources, so that the browser thinks that this request is of the same origin, the browser will not intercept it, and the data can be returned normally (similar to the vpn principle).

Proxy basic configuration module.exports = {devServer: {proxy: {'/ proxyurl': {url with the same origin as target:' http://localhost:9999',// is simply the server you want to visit / / ws: true, this is to enable websocket changeOrigin: true / / literally: many people say that changing the source point enables cross-domain pathRewrite: {'^ / proxyurl':'/ / another way to write it is'^ / proxyurl':'/ 'self-test} / / write the simplest example usage / / the front-end project address is http://localhost:8080//. The back-end project address is http://localhost:9999 axios.get ("/ proxyurl/user/getalluser"). Then (res = > {console.log (res)) })

Explain this example:

Obviously, we accessed the back-end resources through the vue project. Let's put aside the proxy list and look at this code. The resources are requested by http://localhost:8080/proxyurl/user/getalluser.

But with the reverse proxy, the reverse proxy sees the'/ proxyurl', reverse proxy working'in your url, replacing the 'http://localhost:8080' in front of'/ proxyurl' 'with' http://localhost:9999', and then the url requesting resources becomes' http://localhost:9999/proxyurl/user/getalluser'.

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

Ps: usually we encapsulate axios, which can be written when creating an axios instance

Export function request (config) {let axiosInstance = axios.create ({baseURL:'/ proxyurl', / / concatenate the following url when calling timeout: 5000}); return axiosInstance (config) } after reading this, the article "how to use the second encapsulation of axios and proxy reverse proxy" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.