Note: The following code should be tested in Firefox 3.5, Chrome 3.0, and Safari 4 versions. The implementation of IE8 is different from other browsing methods.
2, pre-test request
The preflight request first needs to send an HTTP OPTIONS request header to the resource of another domain name in order to determine whether the actual sent request is secure. The following 2 scenarios require a preflight:
A, not a simple request above, such as a POST request using Content-type for Application/xml or Text/xml
b, set the custom header in the request, such as X-json, X-mengxianhui, etc.
Note: In IIS, you must configure the action of the. aspx extension in the application extensions to allow OPTIONS.
Below we give a preflight request:
[XHTML]View Plaincopy
- <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
- "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title> dimant Ajax cross-domain request test </title>
- </head>
- <body>
- <input type=' button ' value=' Start testing ' onclick=' crossdomainrequest () ' />
- <div id="Content"></div>
- <mce:script type="Text/javascript"><!--
- var xhr = new XMLHttpRequest ();
- var url = ' http://dotnet.aspx.cc/PreflightedRequests.aspx ';
- function Crossdomainrequest () {
- document.getElementById ("Content"). InnerHTML = "Start request ...";
- if (XHR) {
- var xml = "<root> test </root>";
- Xhr.open (' POST ', url, true);
- Xhr.setrequestheader ("Powered-by-mengxianhui", "Approve");
- Xhr.setrequestheader ("Content-type", "Application/xml");
- Xhr.onreadystatechange = handler;
- Xhr.send (XML);
- } else {
- document.getElementById ("Content"). InnerHTML = "Cannot create XMLHttpRequest. ";
- }
- }
- function Handler (EVTXHR) {
- if (xhr.readystate = = 4) {
- if (xhr.status = =) {
- var response = Xhr.responsetext;
- document.getElementById ("Content"). InnerHTML = "Result:" + response;
- } else {
- document.getElementById ("Content"). InnerHTML = "cannot be accessed across. ";
- }
- }
- else {
- document.getElementById ("Content"). InnerHTML + = "<br/> Execution Status readyState:" + xhr.readystate;
- }
- }
- --></mce:script>
- </body>
- </html>
In the example above we send data in XML format, and send a nonstandard HTTP header Powered-by-mengxianhui to explain how the server side should set the response header.
On the server side, the contents of preflightedrequests.aspx are as follows:
[XHTML]View Plaincopy
- <%@ page language="C #"%>
- <mce:script runat="Server"><!--
- protected void Page_Load (object sender, EventArgs e)
- {
- if (Request.HttpMethod.Equals ("GET"))
- {
- Response.Write ("This page is used to test cross-domain POST requests, direct browsing is of little significance.") ");
- }
- else if (Request.HttpMethod.Equals ("Options"))
- {
- Notifies the client that a preflight request is allowed. and set the cache time
- Response.clearcontent ();
- Response.AddHeader ("Access-control-allow-origin", "http://www.meng_xian_hui.com:801");
- Response.AddHeader ("Access-control-allow-methods", "POST, GET, OPTIONS");
- Response.AddHeader ("Access-control-allow-headers", "Powered-by-mengxianhui");
- Response.AddHeader ("Access-control-max-age", "30");
- This procedure does not need to return data
- Response.End ();
- }
- else if (Request.HttpMethod.Equals ("POST"))
- {
- if (request.headers["Origin"]. Equals ("http://www.meng_xian_hui.com:801"))
- {
- System.Xml.XmlDocument doc = new System.Xml.XmlDocument ();
- Doc. Load (Request.inputstream);
- Response.AddHeader ("Access-control-allow-origin", "http://www.meng_xian_hui.com:801");
- Response.Write ("The data you submitted is:<br/><br/>" + Server.HTMLEncode (DOC). OuterXml));
- }
- Else
- {
- Response.Write ("Do not allow your site to be requested. ");
- }
- }
- }
- --></mce:script>
Click the "Start Test" button and the following series of requests will be executed.
[XHTML]View Plaincopy
- Options/preflightedrequests.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
- origin:http://www.meng_xian_hui.com:801
- Access-control-request-method:post
- Access-control-request-headers:powered-by-mengxianhui
- http/1.x OK
- Date:sun, 14:00:34 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
- Access-control-allow-methods:post, GET, OPTIONS
- Access-control-allow-headers:powered-by-mengxianhui
- Access-control-max-age:30
- Set-cookie: asp.net_sessionid=5npqri55dl1k1zvij1tlw3re; path=/; HttpOnly
- Cache-control:private
- content-length:0
- Post/preflightedrequests.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
- Powered-by-mengxianhui:approve
- Content-type:application/xml; charset=UTF-8
- Referer:http://www.meng_xian_hui.com:801/crossdomainajax/preflightedrequests.html
- Content-length:19
- origin:http://www.meng_xian_hui.com:801
- Pragma:no-cache
- Cache-control:no-cache
- <root> Test </root>
- http/1.x OK
- Date:sun, 14:00:34 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=byvose45zmtbqy45d2a1jf2i; path=/; HttpOnly
- Cache-control:private
- content-type:text/html; charset=utf-8
- Content-length:65
The above code reflects the execution of the preflight request: First, the OPTIONS request header is sent to the server to consult the server for more information to prepare for subsequent real requests. such as whether the POST method is supported. It is worth noting that:
The browser also sends Access-control-request-method:post and Access-control-request-headers:powered-by-mengxianhui request headers.
Note: The above process is the first time the process of the request, if within 30 seconds repeatedly click the button, you can not see the OPTIONS this process. The execution process is this:
[XHTML]View Plaincopy
- Post/preflightedrequests.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
- Powered-by-mengxianhui:approve
- Content-type:application/xml; charset=UTF-8
- Referer:http://www.meng_xian_hui.com:801/crossdomainajax/preflightedrequests.html
- Content-length:19
- origin:http://www.meng_xian_hui.com:801
- Pragma:no-cache
- Cache-control:no-cache
- <root> Test </root>
- http/1.x OK
- Date:sun, 14:06:32 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=qs1c4urxywdbdx55u04pvual; path=/; HttpOnly
- Cache-control:private
- content-type:text/html; charset=utf-8
- Content-length:65
Why is that? Careful child shoes may be noticed, on the server side there is a line of code Response.AddHeader ("Access-control-max-age", "30"); It is used to set the validity time of the preflight, in seconds. Pay special attention to this point.
AJAX (XMLHttpRequest) cross-domain request method in detail (ii)
