Example Analysis of Nginx proxy axios request and precautions
This article will explain in detail the sample analysis of Nginx proxy axios requests and matters needing attention. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.
1. Nginx.conf configuration information
Due to the large amount of nginx.conf configuration information, this article only focuses on setting with axios and static resource requests, and notes some common configuration items by the way. The specific settings are as follows:
# set http server, use 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 server list upstream zp_server {server 127.0.0.1 main 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 proxy (and upstream binding). Set the mapped path location / {# proxy configuration parameter 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 after location Add_header 'Access-Control-Allow-Credentials'' true'; add_header 'Access-Control-Allow-Headers'' Origin, X-Requested-With, Content-Type, Accept' always;} # configure static resources to solve the problem that js css files cannot be loaded and cannot be accessed. Note that / location ~. *\. (js | css | jpg | png) ${proxy_pass http://zp_server;}
2. The slash problem of proxy_pass
Nginx's official website classifies proxy_pass into two types:
One only contains IP and port number (not even after / after the port, special attention should be paid here), such as proxy_pass http://localhost:8080, which is called URI-free mode.
The other is that there are other paths after the port number, including only a single /, such as proxy_pass http://localhost:8080/, and other paths, such as proxy_pass http://localhost:8080/abc.
2.1for the mode without URI
For the method without URI, Nginx will retain the path part of the location, such as:
Location / api1/ {proxy_pass http://localhost:8080;}
When accessing http://localhost/api1/xxx, it proxies to http://localhost:8080/api1/xxx
2.2 for URI mode
For URI mode, nginx will replace URL with an alternative such as alias, and this replacement is only literal, such as:
Location / api2/ {proxy_pass http://localhost:8080/;}
When accessing http://localhost/api2/xxx, http://localhost/api2/ (note the last /) is replaced with http://localhost:8080/, and then the rest of the xxx is added, which becomes http://localhost:8080/xxx.
2.3 summing up
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 slash here and analyze it carefully. Location / api5/ {proxy_pass http://localhost:8080/;} # http://localhost/api5/xxx-> http://localhost:8080/xxx, please note that there is no slash between and xxx, and analyze the reason. Location / api6/ {proxy_pass http://localhost:8080//;} # http://localhost/api6/xxx-> http://localhost:8080//xxx location / api7 {proxy_pass http://localhost:8080/;} # http://localhost/api7/xxx-> http://localhost:8080//xxx location / api8 {proxy_pass http://localhost:8080//; } # http://localhost/api8/xxx-> http://localhost:8080///xxx, notice the double slash here. } this is the end of the article on "sample analysis of Nginx proxy axios requests and precautions". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
