“This is the 17th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021”.

Nginx Static Resource Deployment [4]

Previous articles:

I met Nginx

The installation of the nginx

Nginx core configuration file structure

Nginx Static Resource Deployment [1]

Nginx Static Resource Deployment [2]

Nginx Static Resource Deployment [3]

Static resource optimization configuration syntax

Nginx optimizes the allocation of static resources. This is optimized from three property configurations:

sendfile on;
tcp_nopush on;
tcp_nodeplay on;
Copy the code

(1) Send file, used to open efficient file transfer mode.

Static resource request process: the client sends a request to the server through the network interface operating system pass the client request to the server application, the server application will process the request, the request processing is complete, the operating system also need to deal with the result passed back through the network adapter.

Such as:

server { listen 80; Server_name localhost. location / { root html; index index.html; }} a welcome in the HTML directory. The HTML page, visit the address http://192.168.200.133/welcome.htmlCopy the code

(2) tcp_nopush: this directive takes effect only when sendFile is turned on. It is mainly used to improve the ‘efficiency’ of network packet transmission.

(3) tcp_nodelay: this instruction takes effect only when keep-alive connection is enabled to improve the ‘real time’ of network packet transmission.

Tcp_nopush and tcp_nodelay appear to be mutually exclusive, so why turn on both of these values? We need to know that they are compatible with linux2.5.9 and later. The advantage of turning on all three values is that, Sendfile can be turned on in efficient file transfer mode, and tcp_nopush can be turned on to ensure that packets are fully “filled up” before they are sent to the client, which greatly reduces network overhead and speeds up file delivery. Then, when it reaches the last packet that might be paused because it is not “filled,” Nginx ignores the tcp_nopush parameter, and then tcp_nodelay forces the socket to send the data. TCP_NOPUSH can be set together with TCP_NODELAY, which provides better performance than TCP_NODELAY alone. So we can use the following configuration to optimize the handling of Nginx static resources

sendfile on;
tcp_nopush on;
tcp_nodelay on;
Copy the code

Cross-domain problem solving for Nginx

The same-origin policy

The same Origin policy of the browser is a convention. It is the core and most basic security function of the browser. If the same origin policy is not configured, the normal functions of the browser may be affected.

Same-origin: The protocol, domain name (IP address), and port are the same

http://192.168.200.131/user/1 https://192.168.200.131/user/1 http://192.168.200.131/user/1 http://192.168.200.132/user/1 not http://192.168.200.131/user/1 http://192.168.200.131:8080/user/1 http://www.nginx.com/user/1 http://www.nginx.org/user/1 http://192.168.200.131/user/1 http://192.168.200.131:8080/user/1 http://www.nginx.org:80/user/1 http://www.nginx.org/user/1 not satisfyCopy the code

Cross-domain problem

A brief description:

There are two servers, A and B, respectively. If an asynchronous request is sent from the page of server A to server B to obtain data, A cross-domain problem will occur if server A and server B do not meet the same origin policy.Copy the code

Case demonstration of cross-domain problems

What is the effect of cross-domain problems? , next through a requirement to show you:

The same-origin policy

The same Origin policy of the browser is a convention. It is the core and most basic security function of the browser. If the same origin policy is not configured, the normal functions of the browser may be affected.

Same-origin: The protocol, domain name (IP address), and port are the same

http://192.168.200.131/user/1 https://192.168.200.131/user/1 http://192.168.200.131/user/1 http://192.168.200.132/user/1 not http://192.168.200.131/user/1 http://192.168.200.131:8080/user/1 http://www.nginx.com/user/1 http://www.nginx.org/user/1 http://192.168.200.131/user/1 http://192.168.200.131:8080/user/1 http://www.nginx.org:80/user/1 http://www.nginx.org/user/1 not satisfyCopy the code

Cross-domain problem

A brief description:

There are two servers, A and B, respectively. If an asynchronous request is sent from the page of server A to server B to obtain data, A cross-domain problem will occur if server A and server B do not meet the same origin policy.Copy the code

Case demonstration of cross-domain problems

What is the effect of cross-domain problems? , next through a requirement to show you:

(1) Create a new A.html directory in nginx

< HTML >< head> <meta charset=" utF-8 ">< title> <script SRC ="jquery.js"></script> <script> $(function(){ $(" # "BTN). Click (function () {$.get (' http://192.168.200.133:8080/getUser ', function (data) {alert (JSON. Stringify (data)); }); }); }); < / script > < / head > < body > < input type = "button" value = "data" id = "BTN" / > < / body > < / HTML >Copy the code

(2) Configure the following information in nginx.conf

server{ listen 8080; server_name localhost; location /getUser{ default_type application/json; return 200 '{"id":1,"name":"TOM","age":18}'; } } server{ listen 80; server_name localhost; location /{ root html; index index.html; }}Copy the code

(3) Access the test through the browser

The solution

Use the add_header directive, which can be used to add some header information

Access-control-allow-origin and access-Control-allow-methods headers need to be added to solve cross-domain problems

Access-control-allow-origin: specifies the source address information that allows cross-domain Access. You can specify multiple sources (separated by commas) or use * to represent all sources

Access-control-allow-methods: allows cross-domain Access requests. The value can be GET, POST, PUT, DELETE… , you can set them all or as required. Separate multiple values with commas

Specific Configuration modes

location /getUser{
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
    default_type application/json;
    return 200 '{"id":1,"name":"TOM","age":18}';
}
Copy the code