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

Basic ideas for finding errors in Web front-end development

WEB development mainly consists of two interactio...

How to configure mysql5.6 to support IPV6 connection in Linux environment

Introduction: This article mainly introduces how ...

Introduction to MySQL database performance optimization

Table of contents Why optimize? ? Where to start?...

CSS3 flip card number sample code

I received a task from the company today, and the...

Detailed explanation of Vue plugin

Summarize This article ends here. I hope it can b...

Node+socket realizes simple chat room function

This article shares the specific code of node+soc...

Implementation of vscode custom vue template

Use the vscode editor to create a vue template, s...

MySQL download and installation details graphic tutorial

1. To download the MySQL database, visit the offi...

MySQL 8.0.20 Installation Tutorial with Pictures and Text (Windows 64-bit)

1: Download from mysql official website https://d...

Fixed a bug caused by scrollbar occupying space

background This bug was caused by滾動條占據空間. I check...

The combination and difference between ENTRYPOINT and CMD in dockerfile

In the previous article [Detailed explanation of ...

How InnoDB cleverly implements transaction isolation levels

Preface In the previous article Detailed Explanat...

Practice of dynamically creating dialog according to file name in vue+el-element

Table of contents background accomplish 1. Encaps...

Vue/react single page application back without refresh solution

Table of contents introduction Why bother? Commun...