Shulou(Shulou.com)06/01 Report--

Today, I will talk to you about the issues of cross-domain access to Nginx, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following for you. I hope you can get something from this article.

I. what is cross-domain

It is simply understood that due to the restriction of the same origin policy of JavaScript, the js under the a.com domain cannot manipulate the objects under the b.com or c.a.com domain name.

Homology refers to the same protocol, domain name, and port. Pay special attention to two points:

If it is the protocol and port that cause cross-domain problems, the foreground is powerless.

In the cross-domain problem, the domain is only identified by "protocol + domain name + port". Even if two different domain names point to the same ip address, they are cross-domain.

Second, common cross-domain situations

URL indicates whether to allow communication http://www.a.com/a.jshttp://www.a.com/b.js to allow http://www.a.com/lab/a.jshttp://www.a.com/script/b.js under the same domain name. Different folders under the same domain name allow http://www.a.com:8000/a.jshttp://www.a.com/b.js to have the same domain name Different ports do not allow http://www.a.com/a.jshttps://www.a.com/b.js to have the same domain name Different protocols do not allow http://www.a.com/a.js domain names and domain names corresponding to ip do not allow http://www.a.com/a.jshttp://script.a.com/b.js primary domains to be the same. Different subdomains do not allow http://www.a.com/a.jshttp://a.com/b.js for the same domain name, and different secondary domain names (as above) are not allowed (in this case, cookie is not allowed to access) http://www.cnblogs.com/a.jshttp://www.a.com/b.js different domain names are not allowed.

Pay special attention to two points:

First, the foreground is powerless if the cross-domain problem caused by the protocol and port is powerless. Second: in the cross-domain problem, the domain is only identified by the "header of URL" rather than trying to determine whether the same ip address corresponds to two domains or whether the two domains are on the same ip. "URL header" refers to _ window.location.protocol + _ domain, which can also be understood as "Domains, protocols and ports must match".

III. Cross-domain solutions

There are many kinds, most of which are using JS Hack

1. Setting of document.domain+iframe

2. Create script dynamically

3. Using iframe and location.hash

4. Cross-domain data transmission realized by window.name.

5. Use HTML5 postMessage

6. For more information on flash, please see http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m5.

7. The method of nginx reverse proxy is rarely mentioned, but it does not need the cooperation of the target server, but you need to build a transit nginx server to forward requests.

8. Jquery JSONP (essentially creating script dynamically) http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

9. Cross-domain resource sharing (CORS) this is the cross-domain solution we are going to introduce, and it is also the standard solution for future cross-domain problems.

IV. About CORS

CORS: cross-domain resource sharing (Cross-Origin Resource Sharing) http://www.w3.org/TR/cors/

Almost all current browsers (Internet Explorer 8, Firefox 3.5, Safari 4 + and Chrome 3 +) can support ajax cross-domain calls through a protocol called Cross-Domain Resource sharing (Cross-Origin Resource Sharing). (see: http://caniuse.com/#search=cors)

Chrome, Firefox, and Opera and Safari all use XMLHttpRequest2 objects, while IE uses XDomainRequest. The Request attributes of XMLHttpRequest2: open (), setRequestHeader (), timeout, withCredentials, upload, send (), send (), abort ().

Response properties of XMLHttpRequest2: status, statusText, getResponseHeader (), getAllResponseHeaders (), entity, overrideMimeType (), responseType, response, responseText, responseXML.

1. Enable CORS request

Suppose your application is already on example.com and you want to extract data from www.example2.com. In general, if you try to make this type of AJAX call, the request will fail and the browser will have a source mismatch error. The CORS,www.example2.com server simply needs to add a HTTP Response header to allow requests from the example.com:

Access-Control-Allow-Origin: http://example.com

Access-Control-Allow-Credentials: true (optional)

You can add Access-Control-Allow-Origin to a single resource under a Web site or an entire domain. To allow any domain to submit a request to you, set it as follows:

Access-Control-Allow-Origin: *

Access-Control-Allow-Credentials: true (optional)

In fact, the site (html5rocks.com) has enabled CORS on all its pages. After enabling the developer tools, you will see Access-Control-Allow-Origin in our response.

2. CORS method to realize cross-domain request

To achieve CORS cross-domain, the server needs this process: https://cache.yisu.com/upload/information/20200309/32/45401.jpg

For simple requests, such as GET, you only need to add Access-Control-Allow-Origin after HTTP Response.

For non-simple requests, such as POST, PUT, DELETE, etc., the browser responds twice. The first time preflight (method: OPTIONS), mainly verifies whether the source is legal, and returns the allowed Header and so on. The second time is the real HTTP response. So the server must process the OPTIONS reply.

Http://enable-cors.org/server_nginx.html here is a reference configuration for nginx to enable COSR.

The process is as follows:

First check if there is an origin field in the http header.

If not, or not allowed, it will be handled directly as a normal request, and it will end.

If there is and is allowed, then see if it is preflight (method=OPTIONS)

If it is preflight, it returns Allow-Headers, Allow-Methods, etc., and the content is empty.

If it is not preflight, it returns Allow-Origin, Allow-Credentials, and so on, and returns normal content.

First of all, make the settings on the host that needs to be accessed at the remote end. If the remote host is a nginx service, then add the following information.

Server {listen 80th serverSecretname tangxiaoyue.com;if ($http_user_agent = "Mozilla/5.0") {return 403;} location / {add_header 'Access-Control-Allow-Origin'' *'; add_header 'Access-Control-Allow-Credentials'' true';add_header 'Access-Control-Allow-Methods'' GET, POST, OPTIONS' # Custom headers and headers various browsers * should* be OK with but aren'tadd_header 'Access-Control-Allow-Headers'' DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; is omitted. }}

Fifth, nginx reverse proxy to solve cross-domain

Forbidding cross-domain problems is actually a kind of security behavior of browsers, and most current solutions are accomplished by using this loophole or skill that tags can access across domains, but they all have to make corresponding changes to the target server. If the target server cannot be changed, it needs to be implemented by a local server. If it is implemented locally, you need to build a nginx and deploy the corresponding code under it. An address of the domain name is requested by the page, and the result is returned to the page after being processed by the nginx agent to the target server, and all of these are synchronized.

If the proxy server address is www.c.com/proxy/html/api/msg?method=1=2; www.c.com, it is the nginx host address

Remote server address: http://www.b.com/api/msg?method=1=2

Do the following configuration on the nginx server

Add another location under location.

Location ^ ~ / proxy/html/ {

Rewrite ^ / proxy/html/ (. *) $/ $1 break

Proxy_pass http://www.b.com/;

}

Here is an explanation:

1.'^ ~ / proxy/html/'

As mentioned above, it is a matching rule that intercepts requests, matches any address that starts with / proxy/html/, and stops searching for regularities after the match.

2.rewrite ^ / proxy/html/ (. *) $/ $1 break

Stands for rewriting intercepted requests and can only work on strings after the domain name except for the passed parameters, such as www.c.com/proxy/html/api/msg?method=1=2 rewriting. Rewrite / proxy/html/api/msg only.

The parameter after rewrite is a simple regular ^ / proxy/html/ (. *) $, $1 represents the first () in the rule, $2 represents the value of the second (), and so on.

Break means to stop matching after matching one.

After reading the above, do you have any further understanding of Nginx cross-domain access? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.