Nginx series (4) — location Routing and forwarding rule

This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

This is the last article in the Nginx series that explains how Nginx location does routing and forwarding, and how to configure location to achieve the desired routing and forwarding effect.

More articles on my Github and personal public account [quan Zhandao Road], welcome to watch [front-end knowledge], if you benefit, no money, little hands dot a Star.

Read this article and you will learn

• Nginx configuration of the location
• Nginx cross-domain principle

Nginx configuration of the location

Nginx location syntax rules

• The location [= | | | ~ ~ * ^ ~] / uri / {... }
  • = indicates an exact match
  • ^~ indicates that the URI starts with a regular string, which can be interpreted as matching the URL path
  • The beginning of ~ indicates case-sensitive regular matching
  • The beginning of ~* indicates case-insensitive regular matching
  • ! ~ and! ~* is a case – sensitive and case – insensitive re respectively
  • / universal match. Any request will be matched

Actual Usage Suggestion

• Choice rules

  • Directly match the root of the website, through the domain name to visit the homepage of the website is more frequent, using this will speed up processing
  • This is forwarded directly to the back-end application server, or it can be a static home page

  location = / {
      proxy_pass http://xxxx.com/index
  }
  Copy the code

• Choice rules

  • Handling static file requests is nginx’s strength as an HTTP server
  • There are two configuration modes, directory match or suffix match, either or both

  location ^~ /static/ {
      root /webroot/static/;
  }
  location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ {
      root /webroot/res/;
  }
  Copy the code

• General rules

  • To forward dynamic requests to the back-end application server, add a common prefix to the front-end page for routing and forwarding
  • Non-static file request is the default dynamic request, according to their actual grasp
  • After all, with the current popularity of some frameworks, the.php,.jsp suffix is very rare

  location /api/ {
      proxy_pass http://xxxx.com/api/abc
  }
  Copy the code

Rewrite grammar rules

• Last – Rewrite is almost always written with this Flag
• Break — To abort the Rewirte and not continue the match
  • The difference between last and break
    • Last is written in server and if, while break is written in location
    • Last does not terminate the rewritten URL matching, that is, the new URL will go through the matching process again from the server, while break terminates the rewritten URL matching
    • Both break and last prevent further execution of the rewrite directive
• Redirect – Returns the temporary redirected HTTP status 302. The redirect address is displayed in the address bar
• Permanent – Returns HTTP status 301 for permanent redirection, and the address is displayed in the address bar
  • Redirect and permanent
    • Temporary redirection: No effect on old urls, but no ranking for new urls
    • Permanent redirection: the new url completely inherits the old url, and the ranking of the old url is completely cleared

Common global variables

• $argsThis variable is equal to the argument in the request line, as in $query_string
• $content_length: Content-Length field in the request header.
• $content_type: Content-Type field in the request header.
• $document_root: The value specified in the root directive for the current request.
• $host: Requests the host header field, otherwise the server name.
• $http_user_agent: Indicates client agent information
• $http_cookie: Indicates client cookie information
• $limit_rate: This variable can limit the connection rate.
• $request_method: Action requested by the client, usually GET or POST.
• $remote_addr: IP address of the client.
• $remote_port: Indicates the port of the client.
• $remote_user: User name that has been authenticated by Auth Basic Module.
• $request_filename: The file path of the current request, generated by the root or alias directive and the URI request.
• $scheme: HTTP method (such as HTTP, HTTPS).
• $server_protocol: The protocol used for the request, usually HTTP/1.0 or HTTP/1.1.
• $server_addr: Server address, which can be determined after a system call.
• $server_name: Server name.
• $server_port: Port number for the request to reach the server.
• $request_uri: Contains the original URI of the request parameters, excluding the host name, e.g. “/ ABC /index.html? 1 a token =”
• $uri: The current URI with no request parameters. $URI does not contain a host name, such as /foo/bar.html.
• $document_uri: same as $uri.

A parameter handling problem about redirection

• Rewrite: Nginx will rewrite the old address automatically, but this may be redundant to redirect to the new address
• Solution:
  • Adding forwarding Rules? The suffix
• Examples of problems:
  • thehttp://xxx.com/test.html?params=xxxRedirected tohttp://xxx.com/new.html
  • If written as the default:rewrite ^/test.html(.*) /new permanent;
  • The redirection results in:http://xxx.com/new.html?params=xxx
  • If rewritten as:rewrite ^/test.html(.*) /new.html? permanent;
  • The result:http://xxx.com/new.html
• Specify the parameter Rewirte
  • rewrite ^/test.html /new.html permanent;// Overwrite the address with arguments
  • rewrite ^/test.html /new.html? permanent;// Redirects with no parameters
  • rewrite ^/test.html /new.html? id=$arg_id? permanent;// Redirection with specified parameters

eliminateproxy_passforwarding/The shadow of terror

• A little bit of routing in configuring Nginx/May cause you a lot of trouble, although it is only a small slash, but the forwarding results vary widely
• Two cases
  • proxy_passDon’t take/

  The location/alpha / {proxy_pass http://192.168.xxx.xxx:80; } -- -- -- - > > http://192.168.xxx.xxx:80/alpha/ http://domain/alpha/beta/abc http://domain/alpha/ http://192.168.xxx.xxx:80/alpha/beta/abcCopy the code

  • proxy_pass 带/

  The location/alpha / {proxy_pass http://192.168.xxx.xxx:80/; } -- -- -- - > > http://192.168.xxx.xxx:80/ http://domain/alpha/beta/abc http://domain/alpha/ http://192.168.xxx.xxx:80/beta/abcCopy the code

How Nginx can cross domains

A few things to know

• Cross-domain: Javascript from one domain is not allowed to interact with content from another domain on the browser side.
• Homologous: Two pages have the same protocol, host, and port number. If one of them is different, they belong to different sources
• The same origin policy is a convention. It is the core and most basic security function of the browser. If the same origin policy is missing, the normal functions of the browser may be affected
• Cross domain influence
  • Cookies, LocalStorage, and IndexedDB of non-cognate web pages cannot be read
  • DOM of non-homologous web pages cannot be accessed
  • Unable to send AJAX requests to non-same-origin addresses

Illustrate cross-domain

Principle of cross-domain

• The same origin policy exists only on the client, but not on the server

Write in the last

If you find this article beneficial to you, please like it and share it with more people who need it!

Welcome to pay attention to “Quanzhandao road” and wechat official account “Quanzhandao Road”, get more good articles and free books!

If you need [Baidu] & [Bytedance] & [JINGdong] & [Ape Tutoring], please leave a message, you will enjoy VIP speed push service ~

Past oliver

Implementation of wechat JS API payment

Create a personalized Github profile

The interviewer asks you<img>What would you say about the element

Special JS floating-point number storage and calculation

Long [word] baidu and good interview after containing the answer | the nuggets technology essay in the future

Front end practical regular expression & tips, all throw you 🏆 nuggets all technical essay | double festival special articles

A detailed explanation of the unpopular HTML tabIndex

A few lines of code teach you to solve the wechat generated posters and two-dimensional code

Principle of Vue3.0 Responsive data: ES6 Proxy

Make the interviewer fall in love with you

How to draw a fine line gracefully

[3 minutes] Front-end performance optimization -HTML, CSS, JS parts

Front-end performance Optimization – Page loading speed optimization

Front-end Performance Optimization – Network transport layer optimization