Resolving cross-domain issues in HTML5 access-control-allow-origin

Cross-domain in the development of some is a more common problem although there are JSON or XML to solve, now HTML5 began to popular, we can solve the cross-domain problem through access-control-allow-origin, the next look.

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:

is not allowed is not allowed is not allowed is not allowed

url	description	Do you want to allow communication
http ://www.a.com/a.js Span style= "FONT-FAMILY:SIMSUN; font-size:12px; line-height:26px; " >http://www.a.com/b.js	under the same domain name	allow
http ://www.a.com/lab/a.js http ://www.a.com/script/b.js	different folders under the same domain name	allow
http ://www.a.com : 8000 /a.js http://www.a.com/b.js	same domain name, different ports
http ://www.a.com/a.js HTTPS ://www.a.com/b.js	same domain name, different protocol
http ://www.a.com/a.js HTTP// 170.32.82.74/b.js	domain and domain name corresponding IP
http ://www.a.com/a.js HTTP// Script.a.com/b.js	same domain name, different level two domain name
http :// www.a.com / A.js http:// a.com /b.js	level two domain name and first-level domain name	not allowed (cookies in this case Access is also not allowed)
Http://www.b.com/a.js Http://www.a.com/b.js	Different domain names

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 server-side call any domain name initiation request, not recommended
<?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: cors

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 not equal 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.

Report:

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

Resolving cross-domain issues in HTML5 access-control-allow-origin