HTML5 access-control-allow-origin solve cross-domain issues

Cross-Domain requests:

A.abc.com initiates an AJAX request to abc.com/b, and there are cross-domain issues. There are cross-domain issues, but in fact, because www.abc.com is actually the same as a.abc.com, is also a two-level domain name, but not a domain name (first-level domain name is http://abc.com).

For more detailed instructions on whether to allow cross-domain, see the following table:

URL	Description	whether to 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.com: 8000/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	Domain and domain name corresponding IP	Not allowed
Http://www.a.com/a.jshttp://script.a.com/b.js	Same domain name, different level two domain name	Not allowed
HTTP/www.a.com/a.jshttp://a.com/b.js	Level two domain name and first level domain name	Not allowed (cookies are also not allowed in this case)
Http://www.b.com/a.jshttp://www.a.com/b.js	Different domain names	Not allowed

With the understanding of the basic concepts of cross-domain, you can go directly to the topic of this article.

Sponsored Links

Workaround:

If you are using the PHP language on the server Abc.com/b page that receives the request, add the following 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 *, which indicates the current service-side call any domain name initiation request, does not recommend <?php header (' access-control-allow-origin:* ');?>

Just add a response header to the server Responese headers declaration, a cross-domain request will not be blocked by the browser's homologous security policy!

As you can see in the Chrome Debugging Tools Network AJAX Request View panel, it looks like this:

It is important to note that:

When adding the response header Responese headers, allow cross-domain requests for domain names with no slash/or difference, with slash/error :
XMLHttpRequest cannot load abc.com/b. The ' Access-control-allow-origin ' header has a value ' http://A.abc.org/' which is notequal to the supplied Origin. Origin ' http://A.abc.org ' is therefore not allowed access.

Header (' access-control-allow-origin:* ') is a new standard feature of HTML5, so IE10 the following versions of the browser is not supported , so if you are asked to be compatible with IE9 or a lower version of IE browser, will cause cross-domain requests that use this approach, as well as a plan to pass cookies, and eventually return to JSONP (the current mainstream approach is to use JSONP, easy to implement, good compatibility, and a lot of data to look at.) )

After a cross-domain resolution, if you also want to manipulate the cookie, you still have to add the response header:

<?php header ('access-control-allow-credentials: true ');?>

You need to set the withcredentials property of the XMLHttpRequest object to true,jquery1.5.1+ to start providing the appropriate fields, using the following methods:

$.ajax ({url: "b.abc.com", xhrfields:{withcredentials:true},crossdomain:true});

Oh, I got a Cookie, too.

The request to set Withcredentials to True will contain all cookies on the a.abc.com side, and these cookies still follow the same Origin policy, so you can only access cookies within and abc.com/b the same root domain, and cannot access cookies from other domains.

Access-control-allow-origin is actually the most important parameter configuration implemented by HTML5 Cross-origin Resource sharing.
Cross-origin Resource sharing, cross-domain resource sharing, or CORS, can be used as a cross-domain request and response solution.

Cross-origin Resource Sharing detailed explanation and more response header Responese Headers declaration:

W3:http://dvcs.w3.org/hg/cors/raw-file/tip/overview.html
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

Report:

Disable chrome Local Security policy and initiate AJAX requests without a server environment:
Chrome Desktop Shortcuts Right-click Add --disable-web-securityto the Target box under the Shortcut tab and restart your browser.

Reference article:

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

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

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

HTML5 access-control-allow-origin solve cross-domain issues