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

Facebook's nearly perfect redesign of all Internet services

<br />Original source: http://www.a-xuan.cn/...

Specific use of GNU Parallel

what is it? GNU Parallel is a shell tool for exec...

MYSQL A question about using character functions to filter data

Problem description: structure: test has two fiel...

Detailed installation tutorial for MySQL zip archive version (5.7.19)

1. Download the zip archive version from the offi...

Summary of various methods of implementing article dividing line styles with CSS

This article summarizes various ways to implement...

Summary of new usage of vi (vim) under Linux

I have used the vi editor for several years, but ...

A brief discussion on DDL and DML in MySQL

Table of contents Preface 1. DDL 1.1 Database Ope...

Basic usage details of Vue componentization

Table of contents 1. What is componentization? 2....

A very detailed summary of communication between Vue components

Table of contents Preface 1. Props, $emit one-way...

JavaScript Interview: How to implement array flattening method

Table of contents 1 What is array flattening? 2 A...

Detailed steps for implementing timeout status monitoring in Apache FlinkCEP

CEP - Complex Event Processing. The payment has n...

Ubuntu starts the SSH service remote login operation

ssh-secure shell, provides secure remote login. W...