Vue configures the use of reverse proxy

Reverse proxy: Commonly used in production environments, server configuration during project deployment.

Reverse proxy: also create a proxy server to receive the request sent by the client, and then forward the request to the server on the internal network, obtain data from the server and return it to the client. That is, the proxy server .

use:

Hide the real IP address of the server: You can hide the IP address of the server from the client through the reverse proxy.
Load balancing: distribute client requests to different real servers according to the load status of all real servers.
Improve access speed: It can provide caching services for static content and dynamic content with a large number of visits in a short period of time to improve access speed.
Provide security: It can be used as a firewall at the application layer to provide websites with protection against web attacks, making it easier to troubleshoot malware, etc. It can also provide unified encryption and SSL acceleration to the back-end server, and provide HTTP access authentication, etc.

Pagoda panel configuration reverse proxy [Nginx environment]

// Suppose interface
API interface address 1: http://www.baidu.com/api/goods/list
API interface address 2: http://www.baidu.com/webapi/user/info

1. Open the Pagoda panel, enter the website list, click the website to be configured, and click Reverse Proxy.

2. Add a reverse proxy, the configuration suggestion here is consistent with the local forward proxy configuration.

3. The request in the project is the same as the forward proxy, no need to modify, just use it normally.

// 请求API接口1
axios({
    method: 'post',
    url: '/api/goods/list',
    data: qs.stringify({
        id: 1
    })
}).then((res) => {
    console.log(res.data);
})

// 请求API接口2
axios({
    method: 'post',
    url: '/webapi/user/info',
    data: qs.stringify({
        id: 1
    })
}).then((res) => {
    console.log(res.data);
})

The difference between forward proxy and reverse proxy:

A forward proxy is a proxy for the client, and the server does not know who the real client is. The reverse proxy is the proxy of the server, and the client does not know who the real server is.
The forward proxy is generally set by the client. The reverse proxy is generally set by the server.
The forward proxy is mainly used to solve the problem of access restriction, while the reverse proxy is to provide load balancing, security protection and other functions. But both can improve access speed.

Original author: Wu Xiaotang

Creation time: 2023.6.20

Vue configures the use of reverse proxy

Guess you like