关于跨域的ajax——Cross-Origin Resource Sharing (CORS) - Go语言中文社区

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

对于IE，

1. 把IE的信任站点中把“通过域访问数据资源”设成启用有效。
2.将当前站点设置为可信站点。


--------------------------------------------------------------------------------------------------------

CORS浏览器支持：Firefox 3.5+, Safari 4+, Chrome, Safari for iOS, and WebKit for Android
Js代码  收藏代码
  1. //页面A: http://shawn.test2.com/crossAjax.html  
  2. function create(){  
  3.           
  4.     var objXMLHTTP = new XMLHttpRequest();  
  5.     objXMLHTTP.open('GET', 'http://www.test.com:8080/jsp/json.jsp', true);  
  6.   
  7.     //objXMLHTTP.setRequestHeader("hello","world");  
  8.   
  9.     objXMLHTTP.onreadystatechange = function(){  
  10.         if(objXMLHTTP.readyState == 4){  
  11.             alert(objXMLHTTP.responseText);  
  12.         }  
  13.     };  
  14.     objXMLHTTP.send(null);  
  15. }  
  16. //后端页面B: http://www.test.com:8080/jsp/json.jsp  
  17.   
  18. <%  
  19.       
  20.     // 允许来自 http://shawn.test2.com（默认端口80）的请求。  
  21.     response.setHeader("Access-Control-Allow-Origin","http://shawn.test2.com");  
  22.       
  23.     // 允许所有  
  24.     //response.setHeader("Access-Control-Allow-Origin","*");   
  25.       
  26.     /*  cookie 设置发送到浏览器端，不会生效。 
  27.         String cookieName="Sender";  
  28.         Cookie cookie=new Cookie(cookieName, "Test_Content");  
  29.         cookie.setMaxAge(10);   //存活期为10秒 
  30.         response.addCookie(cookie);  
  31.     */  
  32.   
  33.     String str = "";  
  34.     str += "{";  
  35.     str += ""result":1";  
  36.     str += ","data":[5,7]";  
  37.     str += "}";  
  38.     out.print(str);  
  39. %>  


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

上述的这种跨域请求有几个限制：
    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

注意，头部请求中，多出几个选项：
    Origin: http://shawn.test2.com
    Access-Control-Request-Method: GET
    Access-Control-Request-Headers: hello

如果想采用POST方式提交ajax数据，需要手动设置
Js代码  收藏代码
  1. function create(){  
  2.   
  3.     var objXMLHTTP = new XMLHttpRequest();  
  4.     objXMLHTTP.open('POST', 'http://www.test.com:8080/jsp/json.jsp', true);  
  5.   
  6.     objXMLHTTP.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
  7.     objXMLHTTP.setRequestHeader("hello", "world");  
  8.     objXMLHTTP.onreadystatechange = function(){  
  9.         if(objXMLHTTP.readyState == 4){  
  10.             alert(objXMLHTTP.responseText);  
  11.         }  
  12.     };  
  13.     objXMLHTTP.send("userName=shawn");  
  14. }  

因为这里定义请求头，所以后端也需要做设置支持：
Js代码  收藏代码
  1. <%  
  2.     response.setHeader("Access-Control-Allow-Origin","http://shawn.test2.com");  
  3.   
  4.     //response.setHeader("Access-Control-Allow-Methods","GET,POST");    //逗号分隔;默认可以不设置。  
  5.     response.setHeader("Access-Control-Allow-Headers","Content-Type,hello");    //逗号分隔  
  6.   
  7.     //预检测被缓存时间：30秒；默认可以不设置。在这个时间内，用户再次请求改数据，可以跳过预检测阶段。  
  8.     // 在firefoxV8里面，发现这个设置并没有生效。chromeV14、Safari5是生效的。  
  9.     //response.setHeader("Access-Control-Max-Age","30");  
  10.   
  11.     String str = "";  
  12.     str += "{";  
  13.     str += ""result":1";  
  14.     str += ","data":[5,7]";  
  15.     str += ","userName":" + request.getParameter("userName");  
  16.     str += "}";  
  17.     out.print(str);  
  18. %>      


浏览器支持预检请求：Firefox 3.5+, Safari 4+, and Chrome

关于携带验证信息的请求(Credentialed Requests)

如果希望把cookie信息、HTTP授权信息、客户端的SSL证书等发送到服务器端。可以如下设置：
Js代码  收藏代码
  1. objXMLHTTP.withCredentials = true; //允许ajax请求携带cookie信息  
  2.   
  3. // 服务器端，同样要做调整：  
  4. 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 方法。（其它的方法的是？）
Js代码  收藏代码
  1. //http://shawn.test2.com/crossAjax.html  
  2. function createXDR(){  
  3.     var xdr = new XDomainRequest();  
  4.     xdr.onload = function(){  
  5.         alert(xdr.responseText);  
  6.     };  
  7.     xdr.onerror = function(){  
  8.         alert("An error occurred.");  
  9.     };  
  10.   
  11.     //测试中，发现仅仅只能通过GET方式传值。  
  12.     xdr.open("GET", "http://www.test.com:8080/jsp/jsonie.jsp");  
  13.   
  14.     // IE8 下报错  
  15.     // xdr.contentType = "application/x-www-form-urlencoded";  
  16.   
  17.     //  
  18.     xdr.send();  
  19.   
  20.     // 后端无法读取到POST的内容。不知道为何？  
  21.     // xdr.send("userName=shawn");  
  22. }  
  23.   
  24. // http://www.test.com:8080/jsp/jsonie.jsp  
  25. <%  
  26.     response.setHeader("Access-Control-Allow-Origin","*"); // allow all  
  27.       
  28.     String str = "";  
  29.     str += "{";  
  30.     str += ""result":1";  
  31.     str += ","data":[5,7]";  
  32.     str += ","userName":" + request.getParameter("userName");  
  33.     str += "}";  
  34.     out.print(str);  
  35. %>  

总的来说，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》
分享到：
版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/hongweigg/article/details/39054403
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2019-09-05 16:07:37
  • 阅读 ( 987 )
  • 分类：Go Web框架

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！