Why does the front end need an API proxy?

When we are developing a project, if the service is deployed in a distributed manner, that is, it is deployed on different servers according to different modules or functions, as shown in the figure below

The purpose of configuring the proxy for the front-end API is to solve the cross-domain problem

There are three ways to configure the front-end API proxy

This article takes configuring the proxy of Dva project as an example. Because the SCAFFOLDING of Dva project has its own Mock function, it saves the trouble of writing interfaces by itself. At the same time, internal projects of the company also use this technology, so that team members can also do a reference.

Example Address: github.com/ranshaw/fro…

Pull the code, install the dependency, and visit http://localhost:8000 (default port 8000, if occupied, another port) to see the Welcome to DVA page. Roadhogrc.mock. js is the configuration file for mock data, currently

http://localhost:8000/users/1

  1. Using www.frontproxy.com to access the development environment, that is, typing www.frontproxy.com in the browser is equivalent to typing localhost:8000.
  2. Proxy the users, todos, and posts modules, that is, request interfaces starting with /users/, /todos/, and /posts/ in the request path, to different servers.
  3. Eventually request such as www.frontproxy.com/users/1 returned data for the request jsonplaceholder.typicode.com/users/1 returned data

Note: this article will be the request of the three modules are acting to jsonplaceholder.typicode.com; For the convenience of testing, all Get requests are used, and other requests are the same as Get. The configuration method described in the following uses Mac as an example. The configuration principle is the same on Windows.

Configure the Nginx and Hosts implementations

Configure Hosts

On the MAC terminal, run sudo vi /etc/hosts to edit the hosts file and add the following configuration 127.0.0.1 www.frontendproxy.com

Vim command details

Now if we go to www.frontproxy.com:8000 and go to localhost:8000, we have the same effect,

Configure Nginx

After installing Nginx, run CD /usr/local/etc/ Nginx on the Mac terminal to find the nginx.conf file. You can open it using software or run vi nginx.conf to add the following configuration

server { listen 80; server_name www.frontendproxy.com; index index.html; Location / {proxy_pass http://127.0.0.1:8000/; }}Copy the code

Enter sudo nginx in the terminal and start nginx. At this point, enter www.frontendproxy.com in the browser and it will display normally. However, when you modify the page content, you will find that http://localhost:8000 will refresh automatically. Update the content you modified just now, the www.frontendproxy.com page does not refresh automatically, the modified content is displayed after manual refresh, and there is an error in the page

The location/sockjs - node / {proxy_pass http://127.0.0.1:8000/sockjs-node/; Proxy_http_version 1.1; proxy_set_header Upgrade$http_upgrade;
    proxy_set_header Connection "upgrade";	
 }
Copy the code

Run sudo nginx -s reload on the terminal to restart nginx.

At this point, we are ready to use the domain name to access the local project and have fun developing, but the data requesting the Users module is still the data in the Mock,

We added the following configuration to Nginx to proxy requests from the Users module,

location /users/ {
    proxy_pass http://jsonplaceholder.typicode.com/users/;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
Copy the code

The terminal type sudo nginx -s reload restart nginx, again request www.frontendproxy.com/users/1 you will find that the data returned is not Mock configuration data, But jsonplaceholder.typicode.com/users/1 returned data, the agent has to take effect

Similarly, todos and Posts modules are configured as follows

server { listen 80; server_name www.frontendproxy.com; index index.html; Location / {proxy_pass http://127.0.0.1:8000/; } the location/sockjs - node / {proxy_pass http://127.0.0.1:8000/sockjs-node/; Proxy_http_version 1.1; proxy_set_header Upgrade$http_upgrade;
        proxy_set_header Connection "upgrade";	
     }
    location /users/ {
        proxy_pass http://jsonplaceholder.typicode.com/users/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /todos/ {
        proxy_pass http://jsonplaceholder.typicode.com/todos/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /posts/ {
        proxy_pass http://jsonplaceholder.typicode.com/posts/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }}Copy the code

OK, now we have completed the proxy for the users, Todos, posts module request interface, different modules corresponding to the server address, can be customized.

Charles configuration agent

Charles is a super good caught on the Mac software, especially for the development of mobile terminal interface debugging, is not too great, extension in this not do, later will write article, download address for: link: pan.baidu.com/s/1UCJu9KaB… Extraction code: SHFP.

If you have configured Hosts and Nginx as described in the previous tutorial, clear them out and start Charles configuration.

Charles cannot directly capture the package for Chrome, you need to set the proxy for Chrome, I use a Chrome plug-in SwitchyOmega, configure the proxy in SwitchOmega, 8888 is Charles’ default port, if you have changed, Please fill in your changed port

Click the Add button to add

www.frontendproxy.com

Wepack + Host Switch Plus configuration

At present, webpack is basically used in the front-end development environment, and the package Webpack-dev-server is also necessary for building the development environment with Webpack. The automatic refresh and hot update functions commonly used by us are provided by it, as is the proxy function we will talk about today.

Host Switch Plus is a Chrome extension that you can download from the Chrome App Store.

First of all, we configure the proxy for domain names, which can be added individually or in batches

www.frontendproxy.com has been deputized
http://localhost:8000 

{
  "proxy": {
  "/sockjs-node/": {
    "target": "http://127.0.0.1:8000/"."changeOrigin": true
  },
  "/users/": {
    "target": "http://jsonplaceholder.typicode.com/"."changeOrigin": true
  },
  "/todos/": {
    "target": "http://jsonplaceholder.typicode.com/"."changeOrigin": true}}}Copy the code

For details about proxy configuration rules in webpack-dev-server, please click here. I will not go over them one by one here.

Note: If you are using now is Nginx proxy configuration, now want to webpack configuration agent, if want to/users/agent module, expect the agent’s interface address for http://localhost:8000/login, Nginx and webpack configuration are as follows, Eventually proxy server sends the request to http://jsonplaceholder.typicode.com/login, pathRewrite Webpack configuration items to add a configuration, to rewrite the path of the proxy server, Replace /users/ in the request with /. Sometimes the backend needs some values in the request header, so you need to add a custom request header (version [email protected]) as follows:

Nginx configuration: the location/users / {proxy_pass http://jsonplaceholder.typicode.com/; proxy_set_header X-Real-IP$remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } Webpack configuration: {"proxy": {
  "/users/": {
    "target": "http://jsonplaceholder.typicode.com/"."changeOrigin": true."pathRewrite": { "^/users/": "/"},"headers"// You need to define the request header Host:"localhost:8000"}}}},Copy the code

conclusion

Here are the highlights. We compare these three configurations from three aspects: scope of application, ease of configuration, and cost of team collaboration

The National Day of the day so in the past, feel helpful children’s shoes, help point 👍 yo!