HTML5 Access-Control-Allow-Origin solves cross-Origin problems. html5 tutorial

HTML5 Access-Control-Allow-Origin solves cross-Origin problems. html5 tutorial

Cross-origin request:

A.abc.com initiates an ajax request to abc.com/B, which also has cross-origin issues. The reason for cross-domain problems, in fact, is because www.abc.com is actually the same as A.abc.com, is also a second-level domain name, rather than a level-1 domain name (level-1 domain name is a http://abc.com ).

For details about whether cross-origin is allowed, refer to the following table:

URL	Description	Allow communication?
Http://www.a.com/a.jshttp://www.a.com/ B .js	Under the same domain name	Allow
Http://www.a.com/lab/a.jshttp://www.a.com/script/ B .js	Different folders under the same domain name	Allow
Http://www.a.com8000/A. jshttp: // www.a.com/ B .js	Same domain name,Different ports	Not Allowed
Http://www.a.com/a.jsHttps: // Www.a.com/ B .js	Same domain name,Different protocols	Not Allowed
Http://www.a.com/a.jshttp://170.32.82.74/ B .js	Corresponding ip addresses of domain names and domain names	Not Allowed
Http://www.a.com/a.jshttp://script.a.com/ B .js	Same domain name, different second-level domain names	Not Allowed
Http ://Www.a.com/A. jshttp ://A.com/B. js	Second-level domain name and first-level domain name	Not allowed (cookie Access is not allowed in this case)
Http://www. B .com/a.jshttp://www.a.com/ B .js	Different domain names	Not Allowed

After understanding the basic concepts of cross-origin, you can directly enter the topic of this article.

Sponsor Link

Solution:

If the PHP language is used on the abc.com/ B page of the server that receives the request, add the following content to the page:

// Specify a trusted domain name to receive response information. Recommended <? Php header ('access-Control-Allow-Origin: http://A.abc.com ');?>

Or join

// Use the wildcard * to send a request to any domain name of the current server. It is not recommended. <? Php header ('access-Control-Allow-Origin: * ');?>

In this way, the server simply adds a response header responese headers statement, so that a cross-origin request will not be blocked by the browser's same-origin security policy!

You can see in the chrome debugging tool Network ajax request display panel, which is similar to the following:

Note that:

When the Response Header responese headers is added, the domain names allowed for cross-origin requests do not contain a slash/or are different,Slash/an error will be reported:
XMLHttpRequest cannot load abc.com/B. The 'access-Control-Allow-origin' header has a value 'HTTP: // A.abc.org/'thatIs not equalTo the supplied origin. Origin 'HTTP: // A.abc.org 'is therefore not allowed access.

Header ('access-Control-Allow-Origin: * '); is a standard feature added to html5. thereforeBrowsers earlier than IE10 do not supportTherefore, if you require Internet Explorer to be compatible with Internet Explorer 9 or a later version, the cross-origin requests using this method and the plan to transmit cookies will be aborted, finally, we have to return to JSONP (currently, the mainstream processing method is JSONP, which is easy to implement and has good compatibility. There are also a lot of information to query .)

After cross-origin resolutionOperation Cookie, You have to continue adding the response header:

<?php  header('Access-Control-Allow-Credentials:true'); ?>

TheWithCredentialsIf the attribute is set to true, corresponding fields are provided in JQuery1.5.1 +. The usage is as follows:

$.ajax({url:"B.abc.com",xhrFields:{withCredentials:true},crossDomain:true});

Oh, too ~ The Cookie is received.

When withCredentials is set to true, all cookies on the.abc.com side are contained. These cookies still follow the same-origin policy. Therefore, you can only access cookiein the same root domain as abc.com/ B, but cannot access cookiein other domains.

Access-Control-Allow-Origin is actually the most important parameter configuration for html5 Cross-Origin Resource Sharing.
Cross-Origin Resource Sharing, CORS for shortCan be used as a solution for cross-origin requests and responses.

Cross-Origin Resource Sharing detailed explanation and more response header responese headers declarations:

Http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html (w3)
Firefox: https://developer.mozilla.org/En/HTTP_access_control
Ie10: http://blogs.msdn.com/ B /ie_cn/archive/2012/02/14/ie10-cors-for-xhr.aspx

Appendix:

Disable chrome's Local Security Policy and initiate ajax requests without configuring the server environment:
Right-click the chrome desktop shortcut key and add it to the "target" box under the shortcut tab.-- Disable-web-securityRestart the browser.

References:

Http://www.cnblogs.com/MyRobotDream/p/3543402.html

Http://www.php1.cn/article/8354.html

Http://huaidan.org/archives/2729.html