Note: Nginx proxy axios requests and precautions

Recently, we wrote a small demo. Because of the cross-domain limitation of the interface when we use the online data of a large factory, we use Nginx agent to solve these problems.

1. nginx.conf configuration information

Because of the large amount of configuration information of nginx.conf, this article only focuses on following axios and static resource request settings. By the way, some common configuration items will also be noted. Specific settings are as follows:

# Setting up http server and using 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].";

  #Setting the actual server list 
  upstream zp_server{
    server 127.0.0.1:8089;
  }
  
  #HTTP Server 
  server {
    #Listen on port 80
    listen    80
    
    #Define service name
    server_name  localthost;
    
    #Home Page
    index index.html
    
    #Point to the project root directory
    root D:\project\src\main\webapp;
    
    #Encoding format
    charset utf-8;
    
    #The path of the agent (bound to upstream), and the path of the mapping is set after location
    location / {
      #Agent 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 related 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 solves the problem that js css files cannot be loaded and accessed. Note that there is no access at the end./
     location ~ .*\.(js|css|jpg|png)$ {
       proxy_pass http://zp_server;
     } 
  }
}

2. The slash problem of proxy_pass

Nginx Official website proxy_pass is divided into two types:

  1. One is that it only contains IP and port number (after the port is connected/not, special attention should be paid here), such as proxy_pass http://localhost:8080, which is called URI-free mode.
  2. The other is that there are other paths after the port number, including only a single / path, such as proxy_pass http://localhost:8080/, and other paths, such as proxy_pass http://localhost:8080/abc.

2.1 For URI-free mode

For non-URI mode, Nginx will retain the path part of location, such as:

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

When accessing http://localhost/api1/xxx, it is proxied to http://localhost:8080/api1/xxx

2.2 For URI mode

For URI s, nginx will replace URL s with alternatives such as alias, and such alternatives are literal ones, such as:

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

When accessing http://localhost/api2/xxx, http://localhost/api2/(note last/) is replaced by http://localhost:8080/, and then the remaining XXXX is added, which becomes http://localhost:8080/xx.

2.3 Summary

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 pay attention to the double oblique line here and have a good analysis.


  location /api5/ {
    proxy_pass http://localhost:8080/haha;
  }
  # Http://localhost/api5/xxx-> http://localhost:8080/hahaxxxx, please note that there is no slash between haha and XXX here, and analyze the reasons.

  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, please note the parallel slash here.
}

Tags: Web Server Nginx axios Javascript xml

Posted on Sat, 05 Oct 2019 20:19:13 -0700 by smileyriley21