Access-control-allow-origin cross-domain problem in HTML5 development

Today is ready to call through JavaScript to ask questions and answers to the content, because of the use of different two-level domain names, encountered a cross-domain problem, although you can use JSON or XML to solve this problem, but we can Access-Control-Allow-Origin solve the cross-domain problem, the following look at Access-Control-Allow-Origin A workaround for cross-domain issues.

What is cross-domain?

As the name implies, cross-domain is a different domain name under the resource access, will be blocked by the browser's local security policy, For example www.uedsc.com to Ajax request a wenda.uedsc.com resources, they are actually different two two level domain name, the top-level domain name is uedsc.com, there will be cross-domain access issues.

The following table provides a clear explanation of those that are cross-domain, when they are not part of a cross-domain

URL	Description	whether to allow communication
http://www.a.com/a.js 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	do not allow
http://www.a.com/a.js https://www.a.com/b.js	same domain name, different protocol	does not allow
http://www.a. Com/a.js http://170.32.82.74/b.js	domain name and domain name corresponding IP	do not allow
http://www.a.com/a.js Http://script.a.com/b.js	Same domain name, different level two domain name	not allowed
http://www.a.com/a.js HTTP://A.C Om/b.js	level two domain name and first-level domain name	not allowed (cookies are not allowed in this case)
http://www.b.com/a.js http://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.

Cross-domain Access workaround

If you are using the PHP language on the server that receives the request, abc.com/b the page header, note that it must be before you output any information:

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

Or you can set a resource that responds to any domain name

Use wildcard *, indicates the current server-side call any domain name initiation request, does not recommend the 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!

Attention

When adding a 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 HTML5 new standard feature, so IE10 the following versions of the browser is not supported, so if the requirements of IE9 or lower version of Internet Explorer, will lead to the use of such a way cross-domain requests and delivery Cookie of the plan aborted, eventually return to JSONP, the current mainstream The processing method is to use JSONP, easy to implement, compatibility is good, can be found a lot of information.

After a cross-domain resolution, if you want to do so Cookie , you still have to add the response header:

Header (' access-control-allow-credentials:true ');

To set the properties of the XMLHttpRequest object to withCredentials true , jquery1.5.1+ begins to provide the appropriate fields, using the following methods:

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

The requests that are set up withCredentials true will contain all of the a.abc.com side Cookie , and these Cookie still follow the same Origin policy, so you can only access cookies within and abc.com/b the same root domain, but not other domains.

Access-Control-Allow-OriginIn fact, HTML5 cross-origin Resource sharing implementation of the most important point parameter configuration.
Cross-origin Resource sharing, cross-domain resource sharing, or CORS, can be used as a cross-domain request and response solution.

Attached: Disabling browser security Policy

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

(turn) Access-control-allow-origin cross-domain problem in HTML5 development