Recently, the test environment of a project was migrated, and there was an extra port in the interface domain name after the migration, resulting in cross-domain problems. Therefore, Nginx agent was used to solve these problems.

Proxy_pass slash problem

The Nginx website classifies proxy_pass into two types:

  • 1. The first type contains only the IP address and port number (not even the/after the port).

For example, proxy_pass http://localhost:8080 is called urI-free.

  • 2. There is another path after the port number, which contains only a single /

Such as proxy_pass http://localhost:8080/, as well as other paths, like proxy_pass http://localhost:8080/abc.

  • 2.1 For the mode without URI

For non-URIs, Nginx will keep the path part of the location, for example:

location /api1/ {
	proxy_pass http://localhost:8080;
}
Copy the code

When visiting http://localhost/api1/xxx, you will be agent to http://localhost:8080/api1/xxx

  • 2.2 For URIs

For urIs, nginx will replace the URL with a literal substitution such as alias, such as:

location /api2/ {
	proxy_pass http://localhost:8080/;
}
Copy the code

When visiting http://localhost/api2/xxx, http://localhost/api2/ (note that the final /) has been replaced by http://localhost:8080/, then add the rest of the XXX, Then turned to http://localhost:8080/xxx.

  • 2.3 summarize

If you add “/” to the location directory, you can only match the directory. If you do not add “/” to the location directory, you can match the directory and perform fuzzy matching. However, whether proxy_pass is added with or without “/”, the proxy jump address is directly spliced.

To enhance the impression you can use the following configuration experiment test:

server { listen 80; server_name localhost; location /api1/ { proxy_pass http://localhost:8080; } effect: http://localhost/api1/xxx - > http://localhost:8080/api1/xxxCopy the code
location /api2/ { proxy_pass http://localhost:8080/; } effect: http://localhost/api2/xxx - > http://localhost:8080/xxxCopy the code
location /api3 { proxy_pass http://localhost:8080; } effect: http://localhost/api3/xxx - > http://localhost:8080/api3/xxxCopy the code
location /api4 { proxy_pass http://localhost:8080/; } effect: http://localhost/api4/xxx - > http://localhost:8080//xxx, please pay attention to the double slash here, to analyze.Copy the code
location /api5/ { proxy_pass http://localhost:8080/haha; } effect: http://localhost/api5/xxx - > http://localhost:8080/hahaxxx. Please note here haha no slashes, between XXX and analyze the reasons.Copy the code
location /api6/ { proxy_pass http://localhost:8080/haha/; } effect: http://localhost/api6/xxx - > http://localhost:8080/haha/xxxCopy the code
location /api7 { proxy_pass http://localhost:8080/haha; } effect: http://localhost/api7/xxx - > http://localhost:8080/haha/xxxCopy the code
location /api8 { proxy_pass http://localhost:8080/haha/; } effect: http://localhost/api8/xxx - > http://localhost:8080/haha//xxx, please pay attention to the double slash here. }Copy the code
  • 2. Configure the domain name nginx

Because nginx.conf has a lot of configuration information, this article focuses only on axiOS and static resource request Settings, and also notes some common configuration items. Specific Settings are as follows:

Set up the HTTP server to provide load balancing support with its reverse proxy capabilities

HTTP {# keepalive_timeout 120; # Gzip compression switch and related configuration gzip on; gzip_min_length 1k; gzip_buffers 4 32k; Gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/x-javascript text/css application/xml; gzip_vary on; Gzip_disable "MSIE [1-6]." ; Upstream zp_server{server 127.0.0.1:8089; } #HTTP server server_name localhost; Root /opt/app/nginx/ HTML /; Charset UTF-8; Location / {proxy_connect_timeout 180; proxy_connect_timeout 180; proxy_send_timeout 180; proxy_read_timeout 180; proxy_set_header Host $host; proxy_set_header X-Forwarder-For $remote_addr; proxy_pass http://zp_server/; Add_header 'access-control-allow-origin' '*' always; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always; } # configure static resources solve the problem of js inaccessible to the CSS file cannot be loaded, no/location should be at the end of the ~. * \. (js | | CSS JPG | PNG) ${proxy_pass http://zp_server; }}Copy the code