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:
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 |
| is not allowed
http ://www.a.com/a.js HTTPS ://www.a.com/b.js |
same domain name, different protocol |
| is not allowed
http ://www.a.com/a.js HTTP// 170.32.82.74/b.js |
domain and domain name corresponding IP |
| is not allowed
http ://www.a.com/a.js HTTP// Script.a.com/b.js |
same domain name, different level two domain name |
| is not allowed
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