Vision: Technology is not difficult to learn, teaching people to fish is better than teaching people to fish enter the official website learn more courses

Location Indicates the use of routing rules

In the previous section we talked about many applications of Nginx, each virtual host we will configure the location directive

This instruction is used to match the user’s access route.

General URLS like ours have certain rules, similar to the following configuration, some paths we need to forward to the back-end API cluster, some are static resources we directly read back.

http://domain name: port /pub/ API/XXX /yyyy is an interface path. Http://domain name: port /static/ CSS/XXX is a CSS pathCopy the code

Review the file server configuration

server { listen 80; server_name aabbccdd.com; location /app/img { alias /usr/local/software/img/; }}Copy the code

This location will involve regular expressions. If you are not familiar with regular expressions, be sure to learn about them. Briefly review a few common ones

^ Where does the user access path/API /user have to be this to hit location ^/ API /user$Copy the code

The following is a common path matching, grammar location [= | | to | * ^] uri {… }

Location = / URI = indicates an exact match, which takes effect only if it is fully matched. Location/URI does not carry any modifier, Location ^~ /uri/ matches any query that starts with /uri/ and stops searching for location/generic matches. Any request that does not match another location will be matched. Note: Regular match Case-sensitive match (~) Case-insensitive match (~*) Priority (do not write complex, easy to cause problems and forget) Priority: Precise match > string match (if multiple matches are successfully matched, select the length of the match and record) > Regular matchCopy the code

Let’s try a case and the matching result

server { server_name xdclass.net; location ~^/api/pub$ { ... }} ^/ API /pub$This regular expression means that the string must start with/and end with b$, The center/API/pub must be matching (completely) http://xdclass.net/api/v1 http://xdclass.net/API/PUB does not match, Case-sensitive http://xdclass.net/api/pub?key1=value1 http://xdclass.net/api/pub/ does not match the http://xdclass.net/api/public does not match, The regular expression cannot be matchedCopy the code

Use of the Rewrite rule

Rewrite, the rewrite redirection directive, redirects content to regex(regular expressions) matches

Syntax Regex replacement[flag] rewrite ^/(.*) https://xdclass.net/$1 permanent # Match the full domain name with the following path address. The # replacement part is https://xdclass.net/$1, and $1 is taken from the regex part ()Copy the code
  • Common regular expressions:
character describe
^ Matches the start position of the input string
$ Matches the end of the input string
* Matches the preceding character zero or more times
+ Matches the previous string one or more times
? Matches the previous string zero times or once
. Matches all single characters except “\n”
(pattern) Matches pattern in parentheses

Note the last flag parameter in rewrite

Mark symbol instructions
last After this rule is matched, continue to match new location URI rules
break This rule is terminated after the match is complete. No more rules are matched
redirect Returns 302 temporary redirection
permanent Returns a 301 permanent redirect

So what are the scenarios where there’s only one rewrite? Let me give you a couple of very common examples

Scenario 1: You visit a link that doesn’t exist, so we can do a rewrite over there to jump to our front page.

Scenario 2: You’ve changed the domain name of your website, so for example, we used to call it test.com, but the new domain name is xdclass.net, and then if you go to test com then we can rewrite into xdclass.net

Scenario 3: Our domain name is HTTP at the beginning. Then we upgraded to HTTPS, so we could rewrite to HTTPS after the user accesses HTTP.

The following one is our test configuration. After users visit our domain name, we jump to the official website of Xiaodi Classroom.

This rewrite jump, it’s just redirecting the HTTP status code back to 3xx, and then we’re going to rewrite it in the browser,

The following HTTP request response header shows the flow of the jump.

Browser cross-domain configuration

About cross-domain, whether you are front-end development or back-end development, certainly many students and have encountered, that first we need to know what is cross-domain?

This source is the browser same-origin policy, which was introduced to browsers by Netscape in 1995. All browsers currently implement this policy. Originally it meant that the Cookie set by page A could not be opened on page B unless the two pages were “cognate”.

“Homology” means “three of the same,” just the following three

Same protocol HTTP HTTPS Domain name same www.xdclass.net port same 80 81 A sentence: When a browser requests resources of another domain name from a web page of the same domain name, the domain name, port number, or protocol is different, the browser console cross-domain message is displayed:  No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.Copy the code

Now that we know what cross-domain is, how do we solve it? There are a lot of solutions, but I put it in two broad categories

The first class is JSONP. The first class is JSONP. This one is less used at present. This one is not very flexible.

The second type of Http response header configuration allows cross-domain configuration, and the second type of configuration allows cross-domain configuration in two ways,

The first is to configure our cross-domain header information in our program code through interceptors, and the other is to configure cross-domain information in the Nginx layer

Nginx enables cross-domain configuration under Location

location / { add_header 'Access-Control-Allow-Origin' $http_origin; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requ ested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS'; If ($request_method = 'OPTIONS') {add_header 'access-control-max-age' 1728000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 200; }}Copy the code

Which one do we usually use in our work? In fact, it is recommended to configure the Nginx layer gateway. Can be configured according to different virtual hosts which systems need to span which systems, which systems do not allow cross-domain, so we can go to the front end of the configuration of cross-domain, can also be configured by the back end.

This summary

  • Master the use of location routing rules
  • Learn how to use the rewrite rules
  • Master nginx configuring browsers across domains