关于跨域的ajax――Cross-Origin Resource Sharing (CORS)

转载：http://mutongwu.iteye.com/blog/1637183

CORS浏览器支持：Firefox 3.5+,Safari 4+,Chrome,Safari for iOS,and WebKit for Android

//页面A:http://shawn.test2.com/crossAjax.html
functioncreate(){

varobjXMLHTTP=newXMLHttpRequest();
objXMLHTTP.open('GET','http://www.test.com:8080/jsp/json.jsp',true);

//objXMLHTTP.setRequestHeader("hello","world");

objXMLHTTP.onreadystatechange=function(){
if(objXMLHTTP.readyState==4){
alert(objXMLHTTP.responseText);
}
};
objXMLHTTP.send(null);
}
//后端页面B:http://www.test.com:8080/jsp/json.jsp

<%

//允许来自http://shawn.test2.com（默认端口80）的请求。
response.setHeader("Access-Control-Allow-Origin","http://shawn.test2.com");

//允许所有
//response.setHeader("Access-Control-Allow-Origin","*");

/*cookie设置发送到浏览器端，不会生效。
StringcookieName="Sender";
Cookiecookie=newCookie(cookieName,"Test_Content");
cookie.setMaxAge(10);//存活期为10秒
response.addCookie(cookie);
*/

Stringstr="";
str+="{";
str+="\"result\":1";
str+=",\"data\":[5,7]";
str+="}";
out.print(str);
%>

允许多个域名？可以考虑把域名做一个白名单，读取到服务器，然后再进行匹配。

上述的这种跨域请求有几个限制：
1. 不会携带cookie信息到服务器端；服务器端也不能写cookie到客户端；
2. 不能通过setRequestHeader()自定义头部信息；
3. getAllResponseHeaders()返回值为空字符串。
关于预检请求(Preflighted Request):
事实上，如果用户通过setRequestHeader自定义了头部信息，浏览器会默认先发送一个请求，用了判断请求是否合法，如果不通过，
ajax请求就失败了，如果通过了，浏览器会再发一次请求，读取服务器的返回数据。
例如，上述例子中，如果调用：
objXMLHTTP.setRequestHeader("hello","world");
则浏览器会发出请求，内容为空，请求头部为：
OPTIONS /jsp/json.jsp HTTP/1.1
Host: www.test.com:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0.1) Gecko/20100101 Firefox/8.0.1
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
Connection: keep-alive
Origin: http://shawn.test2.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: hello
注意，头部请求中，多出几个选项：
如果想采用POST方式提交ajax数据，需要手动设置

functioncreate(){

varobjXMLHTTP=newXMLHttpRequest();
objXMLHTTP.open('POST',true);

objXMLHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded");
objXMLHTTP.setRequestHeader("hello","world");
objXMLHTTP.onreadystatechange=function(){
if(objXMLHTTP.readyState==4){
alert(objXMLHTTP.responseText);
}
};
objXMLHTTP.send("userName=shawn");
}

因为这里定义请求头，所以后端也需要做设置支持：

<%
response.setHeader("Access-Control-Allow-Origin","http://shawn.test2.com");

//response.setHeader("Access-Control-Allow-Methods","GET,POST");//逗号分隔;默认可以不设置。
response.setHeader("Access-Control-Allow-Headers","Content-Type,hello");//逗号分隔

//预检测被缓存时间：30秒；默认可以不设置。在这个时间内，用户再次请求改数据，可以跳过预检测阶段。
//在firefoxV8里面，发现这个设置并没有生效。chromeV14、Safari5是生效的。
//response.setHeader("Access-Control-Max-Age","30");

Stringstr="";
str+="{";
str+="\"result\":1";
str+=",7]";
str+=",\"userName\":"+request.getParameter("userName");
str+="}";
out.print(str);
%>

浏览器支持预检请求：Firefox 3.5+,and Chrome
关于携带验证信息的请求(Credentialed Requests)如果希望把cookie信息、HTTP授权信息、客户端的SSL证书等发送到服务器端。可以如下设置：

objXMLHTTP.withCredentials&nbsp;=&nbsp;true;//允许ajax请求携带cookie信息

//服务器端，同样要做调整：
response.setHeader("Access-Control-Allow-Credentials","true");

注意： 1. 这里面，请求携带的是服务器所在域名的cookie。例子中，就是 www.test.com (包括test.com)的cookie信息。
2. 如果服务端这时候设置了cookie，那么它是起作用的，默认挂在 www.test.com 域名下。
IE8+ 下的跨域对象：
IE8+ 支持一个XDomainRequest (XDR) 对象，用来进行跨域的ajax通信。
XDomainRequest 相比较普通的Ajax对象，有以下限制：
1. 不支持Cookie的发送和接收；
2. 除了 Content-type,不能设置其他请求头部；
3. 无法读写返回头部；
4. 仅支持 GET / POST 方法。（其它的方法的是？）

//http://shawn.test2.com/crossAjax.html
functioncreateXDR(){
varxdr=newXDomainRequest();
xdr.onload=function(){
alert(xdr.responseText);
};
xdr.onerror=function(){
alert("Anerroroccurred.");
};

//测试中，发现仅仅只能通过GET方式传值。
xdr.open("GET","http://www.test.com:8080/jsp/jsonie.jsp");

//IE8下报错
//xdr.contentType="application/x-www-form-urlencoded";

//
xdr.send();

//后端无法读取到POST的内容。不知道为何？
//xdr.send("userName=shawn");
}

//http://www.test.com:8080/jsp/jsonie.jsp
<%
response.setHeader("Access-Control-Allow-Origin","*");//allowall

Stringstr="";
str+="{";
str+="\"result\":1";
str+=",255);">总的来说，IE下出于安全的考虑，对于跨域的ajax限制很大，功能也弱。XDomainRequest也支持 progres、timeout等事件，更多内容可以参考MSDN.
参考资料：
https://developer.mozilla.org/en-US/docs/HTTP_access_control
http://msdn.microsoft.com/ZH-CN/library/cc288060
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control
《javascript高级程序设计3》

关于跨域的ajax――Cross-Origin Resource Sharing (CORS)

猜你在找的Ajax相关文章