JavaScript跨域（3）：HTTPaccesscontrol(CORS)跨域

网上看了很多博客和文档，感觉还是Mozilla大大写的最简单、最好懂，不过文字很长。。 https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS 要整篇翻译，我肯定吃不消，当然也没这个必要，下面就提要说一点吧，这个方法还存在兼容性问题，尽

　　网上看了很多博客和文档，感觉还是Mozilla大大写的最简单、最好懂，不过文字很长。。

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

　　要整篇翻译，我肯定吃不消，当然也没这个必要，下面就提要说一点吧，这个方法还存在兼容性问题，尽管有相应的解决手段，但是觉得用起来不是特别爽。

Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. For instance, a resource loaded from Domain A ( http://domaina.example ) such as an HTML web page, makes a request for a resource on Domain B ( http://domainb.foo ), such as an image, using the img element ( http://domainb.foo/image.jpg ). This occurs very commonly on the web today — pages load a number of resources in a cross-site manner, including CSS stylesheets, images and scripts, and other resources.

　　跨站点的HTTP请求也就是从一个域名向另一个域名发送请求（POST，GET等），比如，从http://a.com向http://b.com请求一张图片（http://b.com/images.jpg），这种请求或者说这种现象是时有发生的，所以找到一个好方法来处理这类问题也是十分有必要的。
Mozilla大大说
　　如下，我们在http://foo.example向页面http://bar.example发送请求：
 var  invocation =  new   XMLHttpRequest(); 
  var  url = 'http://bar.other/resources/public-data/' ; 
     
  function   callOtherDomain() { 
    if  (invocation) {     
    invocation.open( 'GET', url,  true  ); 
    invocation.onreadystatechange  =  handler; 
    invocation.send();  
  } 
}  
　　可以看看服务器对浏览器的响应
GET /resources/public-data/ HTTP/1.1 
 Host: bar.other 
User -Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
Accept -Language: en-us,en;q=0.5  
Accept - Encoding: gzip,deflate 
Accept -Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7  
Connection: keep - alive 
Referer: http:  //  foo.example/examples/access-control/simpleXSInvocation.html  
Origin: http: //  foo.example  
   
  
HTTP /1.1 200 OK 
Date: Mon, 01 Dec 2008 00:23:53  GMT 
Server: Apache /2.0.61  
 Access-Control-Allow-Origin: *   
Keep -Alive: timeout=2, max=100  
Connection: Keep - Alive 
Transfer - Encoding: chunked 
Content -Type: application/xml
   
[XML Data]  
　　这些都是关于HTTP的一些数据和参数，如果不太明白的话，可以看看这本书《HTTP权威指南》

　　前半截是FF3.5发送的文件头请求，后半截是服务器的响应。你应该注意到了我标红的那些字，这个就是本文要讲述的重点。

　　在请求之前，我们也可以自己设定一些服务器要响应的内容
 var  invocation =  new   XMLHttpRequest(); 
  var  url = 'http://bar.other/resources/post-here/' ; 
  var  body = '  Arun ' ; 
      
  function   callOtherDomain(){ 
    if  (invocation) 
    { 
      invocation.open( 'POST', url,  true  ); 
       invocation.setRequestHeader(   'X-PINGOTHER', 'pingpong'   );  
       invocation.setRequestHeader(   'Content-Type', 'application/xml'   );  
      invocation.onreadystatechange  =  handler; 
      invocation.send(body);  
    } 
  
......  
　　setRequestHeader顾名思义就是设置请求头的一些参数。

　　上面说了半天也就是告诉大家一些服务器和客户端相关参数设置和解释，还没太涉及到跨域的东西。
Cross Domain [跨域]
　　这是我放到SAE上的一段代码（http://1.qianduannotes.sinaapp.com/test/ACAO.php）
 php
      header ("Access-Control-Allow-Origin: *" );
      //  header("Access-Control-Allow-Origin: http://yourURL.com"); 
     echo  "hello world" ;
 ?> 
　　如果我没加header("Access-Control-Allow-Origin: *")这句话，你通过ajax或者其他方式来请求这个数据是会报错的，不信就可以试试这个链接http://1.qianduannotes.sinaapp.com/test/ACAO_none.php

　　其中的[*]表示所有域都可以访问，如果将Access-Control-Allow-Origin设置为一个特定的URL，那这个文件就只能被特定URL以及他的子域（http://yoururl.com/sub/）访问。
Compatibility [兼容性] Show all versions IE Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Blackberry Browser 2.1 2.2 3.2 2.3 4.0-4.1 3.0 8.0 24.0 4.2-4.3 4.0 9.0 19.0 25.0 5.1 5.0-5.1 4.1 Current 10.0 20.0 26.0 6.0 12.1 6.0 5.0-7.0 4.2 7.0 Near future 21.0 27.0 10.0 Farther future 22.0 28.0

　　最明显的就是IE（8、9）的bug，可以通过XDomainRequest来解决。
 //   1. Create XDR object  
 var  xdr =  new   XDomainRequest(); 
  //   2. Open connection with server using GET method 
xdr.open("get", "http://www.contoso.com/xdr.aspx" );
  //   3. Send string data to server 
xdr.send();      
　　下面附上一个MSDN上的DEMO

XDomainRequest From MSDN
   html  > 
   script   type  ="text/javascript"  > 
     var   xdr;
      function   readdata()
    {
          var   dRes   =   document.getElementById(  '  dResponse  '  );
        dRes.innerText   =   xdr.responseText;
        alert(  "  Content-type:   "   +   xdr.contentType);
        alert(  "  Length:   "   +   xdr.responseText.length);
    }
    
      function   err()
    {
        alert(  "  XDR onerror  "  );
    }
      function   timeo()
    {
        alert(  "  XDR ontimeout  "  );
    }
      function   loadd()
    {
        alert(  "  XDR onload  "  );
        alert(  "  Got:   "   +   xdr.responseText);
    }
      function   progres()
    {
        alert(  "  XDR onprogress  "  );
        alert(  "  Got:   "   +   xdr.responseText);
    }
      function   stopdata()
    {
        xdr.abort();
    }
      function   mytest()
    {
          var   url   =   document.getElementById(  '  tbURL  '  );
          var   timeout   =   document.getElementById(  '  tbTO  '  );
          if   (window.XDomainRequest)
        {
            xdr   =   new   XDomainRequest();
              if   (xdr)
            {
                xdr.onerror   =   err;
                xdr.ontimeout   =   timeo;
                xdr.onprogress   =   progres;
                xdr.onload   =   loadd;
                xdr.timeout   =   tbTO.value;
                xdr.open(  "  get  "  , tbURL.value);
                xdr.send();
            }
              else  
            {
                alert(  '  Failed to create  '  );
            }
        }
          else  
        {
            alert(  '  XDR doesn  '  t exist  '  );
        }
    }
 

    XDomainRequest 
      
Reference [参考资料]
　　1.Mozilla

　　2.MSDN

　　3.http://caniuse.com/

　　4.屈屈（关闭了页面，链接给忘了，^_^）
查看更多关于JavaScript跨域（3）：HTTPaccesscontrol(CORS)跨域的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did97441

更新时间：2022-10-27 阅读：49次