Access-Control-Allow-Origin in HTML5 solves cross-Origin problems

A.abc.com to launch an AJAX request to abc.com/b, there will also be cross-domain problems. There is a cross-domain problem, in fact, because www.abc.com is actually the same as a.abc.com, is also a two-level domain name, rather than a first-level domain name (a domain name is http://abc.com).

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, different port	Not allowed
Http://www.a.com/a.jsHTTPS://www.a.com/b.js	Same domain, different protocol	Not allowed
Http://www.a.com/a.jshttp://170.32.82.74/b.js	Domain name 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 do not allow access in this case)
Http://www.b.com/a.jshttp://www.a.com/b.js	Different domain names	Not allowed

For more information on whether to allow Cross-domain, see the following table:

Once you have an 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 for the abc.com/b page of the service that receives the request, add it to the page:

Specify a trusted domain name to receive response information, recommend
<?php header (' access-control-allow-origin:http://a.abc.com ');?>
or join

Use wildcard * to indicate the current service-side call any domain name initiate request, not recommended
<?php header (' access-control-allow-origin:* ');?>
That's it. Simply add a response header to the server Responese headers declares that a Cross-domain request is not blocked by the browser's homologous security policy!

Using the Chrome Debugging tool network AJAX request View panel can be seen, similar to the following screenshot: Cors

It is to be noted that:

When adding a response header Responese headers, allow Cross-domain requested 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/' 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 version of the browser is not supported, so if you require a compatible IE9 or a lower version of IE browser, Results in a Cross-domain request in this way and a plan to pass cookies, which eventually has to be returned to JSONP (the current mainstream approach is to use JSONP, easy to implement, good compatibility, and a lot of information can be found.) )

After Cross-domain resolution, if you also want to manipulate cookies, you must continue to add the response head:

<?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.

A request that sets Withcredentials to True will contain all cookies on the a.abc.com side, which still follow the homology policy, so you can only access cookies in the same root domain as abc.com/b. You cannot access cookies from other domains.

Access-control-allow-origin is actually the most important parameter configuration for HTML5 Cross-origin Resource sharing implementation.
Cross-origin Resource sharing, cross-domain resource sharing, short CORS, can serve as a Cross-domain request and response solution.

Report:

Disables the chrome local security policy and can initiate AJAX requests without a server environment:
Chrome Desktop shortcut key properties add--disable-web-security to the "target" box under the Shortcut tab and restart the browser