Nginx proxy axios request and precautions

Nginx proxy axios request and precautions

Preface

I recently wrote a small demo. Because I used the online data of a large factory, the interface had cross-domain restrictions, so I used Nginx proxy to solve these problems.

1. nginx.conf configuration information

Since nginx.conf has a lot of configuration information, this article only focuses on the settings of axios and static resource requests, and also notes some common configuration items. The specific settings are as follows:

# Set up the http server and 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:8089;
 }
 
 #HTTP server {
 #Listen port 80
 
 #Define the service name server_name localthost;
 
 #Homepageindex index.html
 
 #Point to the project root directory root D:\project\src\main\webapp;
 
 #Encoding format charset utf-8;
 
 #Proxy path (bound to upstream), set the mapped path after location 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 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;
  }
  
  #Configure static resources to solve the problem that js css files cannot be loaded and accessed. Note that there should be no / at the end.
  location ~ .*\.(js|css|jpg|png)$ {
  proxy_pass http://zp_server;
  } 
 }
}

2. The slash problem of proxy_pass

Nginx's official website divides proxy_pass into two types:

  • One is to include only the IP and port number (not even the / after the port, pay special attention here), such as proxy_pass http://localhost:8080, this method is called the method without URI;
  • The other type has other paths after the port number, including those with only a single /, such as proxy_pass http://localhost:8080/, and other paths, such as proxy_pass http://localhost:8080/abc.

2.1 For methods without URI

For methods without URI, Nginx will retain the path part of the location, for example:

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

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

2.2 For URI method

For URI methods, nginx will use a replacement method such as alias to replace the URL, and this replacement is only a literal replacement, for example:

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

When accessing http://localhost/api2/xxx, http://localhost/api2/ (note the final /) is replaced by http://localhost:8080/, and then the remaining xxx is added, so it becomes http://localhost:8080/xxx.

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 slashes here and analyze it carefully.


 location /api5/ {
  proxy_pass http://localhost:8080/haha;
 }
 # http://localhost/api5/xxx -> http://localhost:8080/hahaxxx. Please note that there is no slash between haha ​​and xxx. Let's analyze 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, please note the double slashes here.
}

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. Thank you for your support of 123WORDPRESS.COM.

You may also be interested in:
  • Vue.js practical use of Vuex + axios to send requests detailed explanation
  • Example of axios processing http sending request in vue (post and get)
  • Issues that need to be noted when sending cross-domain requests with VUE axios
  • Vue axios synchronous request solution
  • Correct handling of Vue axios request timeout
  • Detailed explanation of Vue using axios to send post requests to automatically set cookies
  • Detailed explanation of using Axios for ajax requests in Vue
  • Vue-cli axios request method and cross-domain processing issues
  • Solve the problem of axios sending post request and returning 400 status code
  • Perfect solution to the problem of axios cross-domain request error

<<:  How to deeply understand React's ref attribute

>>:  How to automatically delete records before a specified time in Mysql

Recommend

Detailed Tutorial on Installing VirtualBox 6.0 on CentOS 8 / RHEL 8

VirtualBox is a free and open source virtualizati...

Summarize the problems encountered in using Vue Element UI

Table of contents 1. DateTimePicker date selectio...

A brief discussion on CSS height collapse problem

Performance For example: HTML: <div class=&quo...

Detailed tutorial on setting password for MySQL free installation version

Method 1: Use the SET PASSWORD command MySQL -u r...

Detailed explanation of MySQL Group by optimization

Table of contents Standard execution process opti...

33 of the best free English fonts shared

ChunkFive Free Typefamily Cuprum JAH I Free font Y...

Detailed explanation of Vue's hash jump principle

Table of contents The difference between hash and...

MySQL multi-instance deployment and installation guide under Linux

What is MySQL multi-instance Simply put, MySQL mu...

JS realizes the effect of Baidu News navigation bar

This article shares the specific code of JS to ac...

Detailed configuration of Nginx supporting both Http and Https

It is almost a standard feature for websites nowa...

The textarea tag cannot be resized and cannot be dragged with the mouse

The textarea tag size is immutable Copy code The c...

Problems and solutions encountered when installing mininet on Ubuntu 16.04.4LTS

Mininet Mininet is a lightweight software defined...