AJAX (XMLHttpRequest) for a cross-domain request approach (i)

Note: The following code is tested in the version after Firefox 3.5, Chrome 3.0, and Safari 4. The implementation of IE8 is different from other browsing.

Cross-domain requests, as the name suggests, are resources in one site to access resources on another different domain name site. This is common, such as loading an external style sheet file with a style tag, loading an external picture via an IMG tag, loading an external script file with a script tag, loading a font file by Webfont, and so on. By default, data such as script access to document properties are based on homology policies (Same origin policy).

So, what is the homologous strategy? If the two-page protocol, domain name, and port are exactly the same, then they are homologous. The homology policy is intended to prevent access to documents or scripts loaded from one address or to set properties of documents loaded from another address. If two pages have the same primary domain name, they can also be considered homologous by setting the Document.domain property.

With the rise of Web2.0 and SNS, Web applications need more and more cross-domain access, but there is a security limit to cross-domain requests in scripts, and Web developers desperately need to provide a more secure and convenient way to merge (Mashup) their WEB applications with Cross-domain requests. One of the benefits of this is that you can allocate requests to different servers, reduce the pressure on individual servers to increase responsiveness, and another benefit is that you can distribute different business logic to different servers to reduce the load.

Thankfully, the criteria for Cross-domain requests have been introduced, as has been achieved by mainstream browsers. The Web Applications Working Group (Web application Workgroup) in the Working Group of the consortium publishes a Cross-origin Resource sharing (cross-domain resource sharing, the canonical address: http://www.w3.org/ tr/access-control/and http://dev.w3.org/2006/waf/access-control/) recommend specifications to address Cross-domain request issues. This specification provides a more secure method of Cross-domain data exchange. The description of the specification can access the website address provided above. It should be noted that this specification can only be applied to API containers such as XMLHttpRequest. IE8, Firefox 3.5 and its later versions, Chrome browser, Safari 4, and so on have implemented the Cross-origin Resource sharing specification, which is already ready for Cross-domain requests.

Cross-origin Resource sharing works by adding an HTTP header to determine which resources allow a Web browser to access information under that domain name. However, for those requests that HTTP requests cause side effects on the user's data (especially for HTTP methods other than GET, some MIME-type POST), the specification requires the browser to "test" the request by sending an HTTP option request header asking the server what Some support methods, with the consent of the server, and then use the actual HTTP request method to send the actual request. The server can also notify the client whether to send authentication information, such as cookies and HTTP authentication data, along with the request.

Let's take a practical example to illustrate how Cross-origin Resource sharing works.

1, simple request

What kind of request is a simple request? Simple requests must meet the following 2 points:
A, only requests made using GET and post, where the post includes only the data type sent to the server (Content-type) must be application/x-www-form-urlencoded, Multipart/form-data Or one of the text/plain.
The b,http request does not have a custom request header set, as our usual x-json.

Use the following code to test first:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Then, the contents of the crossdomainrequest.aspx are created on the server as follows:

<%@ Page language= "C #"%> <mce:script runat= "Server" ><!--protected void Page_Load (object sender, EventArgs e) {Response.AddHeader ("Access-control-allow-origin", "http://www.meng_xian_hui.com:801"); Response.Write ("Mengxian will send a congratulatory message to your friends: your first cross-domain test was successful ... "); } --></mce:script>

Click the "Start Test" button to send the request and return the response information as follows:

Get/simplecrosssiterequests.aspx http/1.1 Host:dotnet.aspx.cc user-agent:mozilla/5.0 (Windows; U Windows NT 5.2; ZH-CN; rv:1.9.1.7) gecko/20091221 firefox/3.5.7 (. NET CLR 3.5.30729) accept:text/html,application/xhtml+xml,application/xml ; q=0.9,*/*;q=0.8 accept-language:zh-cn,zh;q=0.5 accept-encoding:gzip,deflate accept-charset:gb2312,utf-8;q=0.7,*; q=0.7 keep-alive:300 connection:keep-alive referer:http://www.meng_xian_hui.com:801/crossdomainajax/ simplecrosssiterequests.html origin:http://www.meng_xian_hui.com:801 http/1.x OK Date:sun, 13:52:00 GMT server:microsoft-iis/6.0 x-powered-by:asp.net x-aspnet-version:2.0.50727 access-control-allow-origin:http:// www.meng_xian_hui.com:801 SET-COOKIE:ASP.NET_SESSIONID=WK5V5NRS5WBFI4RMPJY2JUJB; path=/; HttpOnly cache-control:private content-type:text/html; Charset=utf-8 content-length:84

The

Special note is that in the request information, the browser uses the Origin HTTP header to identify the request from http://www.meng_xian_hui.com:801, and in the returned response information, use the Access-control-allow-origin headers to control which domain names the script can access the resource. If you set access-control-allow-origin:*, scripts for all domain names are allowed to access the resource. If you have more than one, you just need to separate them with commas.

Note: On the server side, the port information in the Access-control-allow-origin response header http://www.meng_xian_hui.com:801 cannot be omitted.

One might think: what happens when you send a request header yourself? such as Xhr.setrequestheader ("Origin", "http://www.meng_xian_hui.com:801"); Practice has proved that it is no good to set Origin head.

Is it possible to use XMLHttpRequest to request data from any Web site now? It's not going to work. Which domain names are allowed to access, but also require the server to set the Access-control-allow-origin header for authorization, the specific code is:

Response.AddHeader (" Access-control-allow-origin "," http://www.meng_xian_hui.com:801 ");

This line of code tells the browser that only scripts from the http://www.meng_xian_hui.com:801 source can be accessed.

OK, so we're done with a simple cross-domain request. It's still a good feeling. Let's do a "pre-check" request below.