Note: The following code should be tested in Firefox 3.5, chrome 3.0, and Safari 4. The implementation method of IE8 is different from that of other browsers.
3. Requests with verification information
Authentication is a common problem in Web development. In cross-origin requests, authentication information is not sent by default. To send verification information, you need to perform the withcredentials attribute. The following is an example of a simple request:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" <br/> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br /> <pead> <br/> <title> Meng xianhui Ajax cross-origin request test </title> <br/> </pead> <br/> <body> <br/> <input type = 'button 'value = 'start testing 'onclick = 'crossdomainrequest () '/> <br/> <Div id = "content"> </div> <br/> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> var xhr = new XMLHttpRequest (); <br/> var url = 'HTTP: // DOTNET. aspx. CC/requestswithcredentials. aspx '; <br/> function crossdomainrequest () {<br/> document. getelementbyid ("content "). innerhtml = "Start request ...... "; <Br/> If (xhr) {<br/> xhr. open ('get', URL, true); <br/> xhr. onreadystatechange = handler; <br/> xhr. withcredentials = "true"; <br/> xhr. send (); <br/>}else {<br/> document. getelementbyid ("content "). innerhtml = "XMLHttpRequest cannot be created. "; <Br/>}< br/> function handler (evtxhr) {<br/> If (xhr. readystate = 4) {<br/> If (xhr. status = 200) {<br/> var response = xhr. responsetext; <br/> document. getelementbyid ("content "). innerhtml = "Result:" + response; <br/>} else {<br/> document. getelementbyid ("content "). innerhtml + = "<br/> execution status:" + xhr. status; <br/>}< br/> else {<br/> document. getelementbyid ("content "). innerhtml + = "<br/> execution status readystate:" + xhr. readystate; <br/>}< br/> // --> </MCE: SCRIPT> <br/> </body> <br/> </ptml>
On the server side, I write the following code to record the number of times the button is clicked through the cookie:
<% @ Page Language = "C #" %> </P> <p> <MCE: script runat = "server"> <! -- <Br/> protected void page_load (Object sender, eventargs e) <br/>{< br/> If (request. httpmethod. equals ("get") <br/>{< br/> response. addheader ("access-control-allow-origin", "http://www.meng _ xian_hui.com: 801"); <br/> response. addheader ("access-control-allow-credentials", "true"); <br/> response. cache. setcacheability (httpcacheability. nocache); <br/> response. expires =-1; <br/> int visit = 1; <br /> If (request. Cookies ["visit"]! = NULL) <br/>{< br/> visit = convert. toint32 (request. cookies ["visit"]. value) + 1; <br/>}< br/> httpcookie = new httpcookie ("visit", visit. tostring (); <br/> cookie. expires = datetime. now. addseconds (30); <br/> response. setcookie; <br/> response. write (visit. tostring (); <br/>}< br/> else if (request. httpmethod. equals ("options") <br/>{< br/> // you can perform more checks based on the origin </P> <p> // notify the client to allow precheck requests. And set the cache time <br/> response. clearcontent (); <br/> response. addheader ("access-control-allow-origin", "http://www.meng _ xian_hui.com: 801"); <br/> response. addheader ("access-control-allow-methods", "Get, Options"); <br/> response. addheader ("access-control-allow-credentials", "true"); <br/> response. addheader ("access-control-max-Age", "30"); <br/> // No data is returned during this process <br/> response. end (); <br/>}< br/> else <br/> {<br/> response. statuscode = 401; <br/>}< br/> // --> </MCE: SCRIPT>
Click Start test. We can detect the following request execution process:
GET/requestswithcredentials. aspx HTTP/1.1 <br/> HOST: DOTNET. aspx. CC <br/> 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) <br/> Accept: text/html, application/XHTML + XML, application/XML; q = 0.9 ,*/*; Q = 0.8 <br/> Accept-language: ZH-CN, ZH; q = 0.5 <br/> Accept-encoding: gzip, deflate <br/> Accept-charset: gb2312, UTF-8; q = 0.7, *; q = 0.7 <br/> keep-alive: 300 <br/> connection: keep-alive <br/> Referer: http://www.meng _ xian_hui.com: 801/crossdomainajax/requestswithcredentials.html <br/> origin: http://www.meng _ xian_hui.com: 801 <br/> HTTP/1.x 200 OK <br/> date: Sun, 10 Jan 2010 14:12:26 GMT <br/> server: Microsoft-IIS/6.0 <br/> X-powered-by: Asp. net <br/> X-ASPnet-version: 2.0.50727 <br/> access-control-allow-origin: http://www.meng _ xian_hui.com: 801 <br/> access-control-allow-credentials: True <br/> set-COOKIE: Asp. net_sessionid = fn2zf0zq1cuwgf45fm5fw145; Path =/; HTTPOnly <br/> set-COOKIE: visit = 1; expires = Sun, 10-Jan-2010 14:12:56 GMT; path =/<br/> cache-control: No-Cache <br/> Pragma: No-Cache <br/> expires:-1 <br/> Content-Type: text/html; charsets = UTF-8 <br/> Content-Length: 1
From the above response, we can see that the cookie will be sent along with the request. If we click the test button multiple times, we can see that the request and response results are as follows:
GET/requestswithcredentials. aspx HTTP/1.1 <br/> HOST: DOTNET. aspx. CC <br/> 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) <br/> Accept: text/html, application/XHTML + XML, application/XML; q = 0.9 ,*/*; Q = 0.8 <br/> Accept-language: ZH-CN, ZH; q = 0.5 <br/> Accept-encoding: gzip, deflate <br/> Accept-charset: gb2312, UTF-8; q = 0.7, *; q = 0.7 <br/> keep-alive: 300 <br/> connection: keep-alive <br/> Referer: http://www.meng _ xian_hui.com: 801/crossdomainajax/requestswithcredentials.html <br/> origin: http://www.meng _ xian_hui.com: 801 <br/> COOKIE: Asp. net_sessionid = fn2zf0zq1cuwgf45fm5fw145; visit = 2 <br/> HTTP/1.x 200 OK <br/> date: Sun, 10 Jan 2010 14:13:58 GMT <br/> Server: microsoft-IIS/6.0 <br/> X-powered-by: Asp. net <br/> X-ASPnet-version: 2.0.50727 <br/> access-control-allow-origin: http://www.meng _ xian_hui.com: 801 <br/> access-control-allow-credentials: True <br/> set-COOKIE: visit = 3; expires = Sun, 10-Jan-2010 14:14:28 GMT; path =/<br/> cache-control: No-Cache <br/> Pragma: No-Cache <br/> expires:-1 <br/> Content-Type: text/html; charsets = UTF-8 <br/> Content-Length: 1
Note: The access counters of ASP. net_sessionid = fn2zf0zq1cuwgf45fm5fw145; visit = 2 are sent to the server.
4. Implementation Method in IE8
Internet Explorer 8 has started to support cross-origin resource access. However, the functions provided by Internet Explorer 8 are relatively simple and can be used for simple requests. The following is an example:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" <br/> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br /> <pead> <br/> <title> Meng xianhui Ajax cross-origin request test </title> <br/> </pead> <br/> <body> <br/> <input type = 'button 'value = 'start testing 'onclick = 'crossdomainrequest () '/> <br/> <Div id = "content"> </div> <br/> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> var xhr = new xdomainrequest (); <br/> var url = 'HTTP: // DOTNET. aspx. CC/simplecrosssiterequests. aspx '; <br/> function crossdomainrequest () {<br/> document. getelementbyid ("content "). innerhtml = "start ...... "; <Br/> If (xhr) {<br/> xhr. open ('get', URL); <br/> xhr. onload = handler; <br/> xhr. send (); <br/>}else {<br/> document. getelementbyid ("content "). innerhtml = "xdomainrequest cannot be created"; <br/>}< br/> function handler (evtxhr) {<br/> document. getelementbyid ("content "). innerhtml = "Result:" + xhr. responsetext; <br/>}< br/> // --> </MCE: SCRIPT> <br/> </body> <br/> </ptml>
In addition, the implementation of IE8 is different from that of other browsers. For more information, see the xdomainrequest object. The address is:
The http://msdn.microsoft.com/zh-cn/library/cc288060 (vs.85). aspx
Finally, friends willing to test can access this http://dotnet.aspx.cc/SimpleCrossSiteRequests.aspx address for a "simple request" test, this page allows any address for cross-origin access. (Sorry, my website may be hacked)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
