In WEB development, we often involve cross-domain requests. There are many ways to solve cross-domain problems, such as window.name, IFrame, JSONP, CORS, etc., which will not be expanded in detail. The cross-domain request method involving different protocols and ports is to use proxy. Here we focus on the Nginx proxy approach.

scenario

A WEB application is locally started with the following port number: 3000, can be accessed through http://127.0.0.1:3000 front page, the page address some of the Ajax request for http://127.0.0.1:3000/api/getList, usually must be 404 or attempt failed, the diagram below:

The back-end service interface deposit lies in the other servers, such as on the company Intranet can be accessed through http://172.30.1.123:8081/api/getList to the service interface in the test environment.

Requests in this case involve different ports across domains, so we can use Nginx proxy requests.

Nginx proxy configuration reference

First find the Nginx configuration file:

  • If you want to install Nginx on Windows, you can find it in the directory where you want to install Nginx.c:\nginx\conf\nginx.conf
  • The Mac system configuration file is stored in:/usr/local/etc/nginx/nginx.conf, Finder throughShift+Command+G, the input/usr/local/etc/nginx/Go to the directory.

Add the following configuration to the Nginx configuration file:

server { listen 80; Server_name 127.0.0.1; Location / {proxy_pass http://127.0.0.1:3000; } location ~ / API / {proxy_pass http://172.30.1.123:8081; }}Copy the code

The above configuration can be interpreted as:

Listen on port 80 (Nginx starts port 80 by default) and forward all requests from http://127.0.0.1 to port 127.0.0.1 for 3000; The request is forwarded to http://172.30.1.123:8081 http://127.0.0.1/api/ or http://127.0.0.1/api/getList

complete

After the above configuration, we can directly access our WEB application through http://127.0.0.1 (if IP access is considered), and relevant API requests will be made according to our Nginx configuration. The browser to see/API/getList request is 127.0.0.1 port to port 80, but in fact this request has been forward our Nginx pointing to http://172.30.1.123:8081/api/getList

Friendly tips:

Nginx must add extra points after each configuration statement; Otherwise, configuration errors will be reported and you will be confused.

expand

Bind the host

If you do not feel comfortable entering IP access, you can modify host by yourself. If the host is bound to the Nginx configuration, you can also configure the specified domain name directly, for example:

server { listen 80; server_name www.domain.com; # change IP to your domain name #... }Copy the code

After modifying host, you can directly access your domain name, such as http://www.domain.com

About the location

Localtion: localtion: localtion: localtion: localtion: localtion

Localtion / {# all requests match the following rule # since all addresses start with /, this rule will match all requests # XXX your configuration is written here} location = / {# exact match /, } localtion/API {# match any URL starting with/API, including any URL after/API, such as/API /getList } localtion ~ / API/ABC {# match any URL starting with/API/ABC, / API/ABC /getList/API/ABC /getList/API/ABCCopy the code
  • In order to/Generic match, if there is no other match, any request will be matched
  • =The beginning indicates an exact match

    For example, only the request at the end of the root directory is matched in A, and cannot be followed by any character string.
  • ^ ~The beginning indicates that the URI begins with a regular string, not a regular match
  • ~The beginning indicates case-sensitive regular matching;
  • ~ *The beginning indicates case-insensitive regular matching

Nginx configures location and rewrite rules