Nginx agent axios request and notes

preface

Recently, I wrote a small demo. Since the interface is cross-domain limited due to the online data of a large factory, I used Nginx agent to solve these problems.

1. nginx.conf configuration information

Since nginx.conf has a lot of configuration information, this article only focuses on axios and static resource request Settings. By the way, some common configuration items are also noted under 1. The specific Settings are as follows:

#  set http The server, with its reverse proxy function to provide load balancing support 
http {
 # Connection timeout 
 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].";

 # Set the actual list of servers  
 upstream zp_server{
 server 127.0.0.1:8089;
 }
 
 #HTTP The server  
 server {
 # Listening to the 80 port 
 listen 80
 
 # Define the service name 
 server_name localthost;
 
 # Home page 
 index index.html
 
 # Point to the project root directory 
 root D:\project\src\main\webapp;
 
 # Coding format 
 charset utf-8;
 
 # The path of the agent (and upstream Binding), location  The path to the mapping is set later 
 location / {
  # Proxy configuration parameters 
  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/;
  
  # Cross-domain correlation Settings 
  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;
  }
  
  # Configuring static resources   To solve js css The file could not load the unreachable problem, note that there cannot be at the end  /
  location ~ .*\.(js|css|jpg|png)$ {
  proxy_pass http://zp_server;
  } 
 }
}

2. The slash problem of proxy_pass

The official website of Nginx divides proxy_pass into two types:

One contains only IP and the port number (not even after the port /), such as proxy_pass http://localhost:8080. This method is called URI without URI. The other one is in the port after the other path 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 the mode without URI, Nginx will keep the path part in location, such as:

location /api1/ {
 proxy_pass http://localhost:8080;
}

During a visit to http: / / localhost api1 / xxx, agent to http: / / localhost: 8080 / api1 / xxx

2.2 for the mode with URI

For URI, nginx will replace URL with a substitution such as alias, and this substitution is only a literal substitution, such as:

location /api2/ {
 proxy_pass http://localhost:8080/;
}

When accessing http: / / localhost api2 / xxx, http: / / localhost api2 / (note that the final /) has been replaced by http: / / localhost: 8080 /, then add the remaining xxx, hence became http: / / localhost: 8080 / xxx.

2.3 conclusion 1

server {
 listen    80;
 server_name localhost;

 location /api1/ {
  proxy_pass http://localhost:8080;
 }
 # http://localhost/api1/xxx -> http://localhost:8080/api1/xxx


 location /api2/ {
  proxy_pass http://localhost:8080/;
 }
 # http://localhost/api2/xxx -> http://localhost:8080/xxx


 location /api3 {
  proxy_pass http://localhost:8080;
 }
 # http://localhost/api3/xxx -> http://localhost:8080/api3/xxx


 location /api4 {
  proxy_pass http://localhost:8080/;
 }
 # http://localhost/api4/xxx -> http://localhost:8080//xxx Please note the double slash here. Analyze it well 1 Under. 


 location /api5/ {
  proxy_pass http://localhost:8080/haha;
 }
 # http://localhost/api5/xxx -> http://localhost:8080/hahaxxx Please pay attention here haha and xxx There are no slashes between analysis 1 The reason. 

 location /api6/ {
  proxy_pass http://localhost:8080/haha/;
 }
 # http://localhost/api6/xxx -> http://localhost:8080/haha/xxx

 location /api7 {
  proxy_pass http://localhost:8080/haha;
 }
 # http://localhost/api7/xxx -> http://localhost:8080/haha/xxx

 location /api8 {
  proxy_pass http://localhost:8080/haha/;
 }
 # http://localhost/api8/xxx -> http://localhost:8080/haha//xxx , notice the double slash here. 
}

conclusion