HTML5 Resolving cross-domain issues

HTML5 Resolving cross-domain issues

Because of the browser's homologous policy, cross-domain access to network connections is not allowed, and the XHR object cannot interact directly with non-homologous web site processing data. And what does homologous mean? The same origin category includes: Rules (protocol), host number (domain name, IP, etc.), port number.

But with openness, the popularity of shared platforms, the need for cross-domain access is even stronger. The most commonly used cross-domain scenario is to dynamically add a script tag, which is somewhat hack, and there seems to be no safe and aboveboard way of cross-domain access.

Finally, the XMLHttpRequest Level2 provided by HTML5 implements cross-domain access and a number of other new features. We will discuss in detail below:

XMLHttpRequest Level2

XHR2 is one of the new features of HTML5 (in fact there is no such concept of XHR1,XHR2, XHR2 is just a set of new specifications provided by HTML5), new features on the original XHR objects: cross-domain access, new events, request progress, and response progress.

Current browser Compatibility List for XHR2:

• U Chrome 2.0 +
• U Firefox 3.5 +
• U Internet Explorer does not support
• U Opera does not support
• U Safari 4.0 or more

Principle:

Under normal circumstances, we write a xhr example:

var xhr = new XMLHttpRequest (); Xhr.open (' GET ', ' http://baidu.com ', true); Access baidu.comxhr.send (NULL);

We run this code locally using chrome and open the console to see the error message:

Figure 1

As you can see here, this request has been killed. This is because our page is local, the domain is http://127.0.0.1, and the requested http://baidu.com is non-homologous.

So when was the request killed, was it immediately terminated by the browser as a cross-domain request before it was issued? In fact, the browser not only makes a request, but also receives a response. Then according to the rules of the response header to determine whether the domain can be received, if not, the browser will error, the received data will not be provided to the script.

We go back to XHR2, which mentions that the XHR object has some new features, including cross-domain access. The implementation is as follows:

On the server side of the page that returns content, set the header Access-control-allow-origin as follows

Response.AddHeader ("Access-control-allow-origin", "*");

Here, let's not discuss the meaning of the setting, first get the code to run and see what the results are.

Page http://inno.hotpotpro.com/FirePot/meetingdate?date=20120723 has been completed as configured above, modify the JS code as follows:

var xhr = new XMLHttpRequest (); Xhr.open (' GET ', ' http://inno.hotpotpro.com/FirePot/meetingdate?date=20120723 ', true); Visit Baidu.comxhr.send ();

Refresh the page to view the console without error. Open the console's "Network" selector card:

Figure 2

You can see the part of the Red Line logo: access-control-allow-origin:*, which is the setting we made on the server side. Switch to the Response tab:

Figure 3

You can see what the server is returning, so we have completed cross-domain access.

How did this happen?

When the browser receives the server return information, it examines the access-control-allow-origin of the response header, and its value identifies the domain allowed by the requested content.

We previously asked the server to set Access-control-allow-origin to *, indicating that the return information allowed all sources to access. If set to a specific domain, such as http://niweisuo.com, it indicates that only the domain is allowed access from niweisuo.com except for homology.

Note:

When using the Ajax class library, it is possible to go through the settings above and still fail through the browser's security restrictions. Then, you can examine the Ajax class library code to see if there is code that affects cross-domain settings:

Figure 4

As above is tangram-ajax-1.5.2.js, affect the cross-domain code, annotation can be adjusted, the other class library please self-tuning.

Note: This article refers to the "Ajax cross-Domain Access" content, part of the same, if there is infringement, please contact me.

Http://www.cnblogs.com/plums/archive/2012/07/31/2616355.html

HTML5 Resolving cross-domain issues