• js-跨域源资源共享(CORS)


    ### 一. CORS(Cross-Origin Resource Sharing,跨域源资源共享)

      基本思想:使用自定义HTTP头部让浏览器与服务器进行沟通

        发送请求时,需附加一个Origin头部

          eg:   Origin:   http://www.xxx.net

      如果服务认为这个请求可以接受,就在Access-Control-Allow-Origin投不中回发相同的源信息

        Access-Control-Allow-Origin: http://www.xxx.net

      1)  IE对CORS的实现

        XDR(XDomainRequest),这个对象与XHR类似

          1.1) 与XHR区别:

            cookie不会随请求发送,也不会随响应返回

            只能设置请求头部信息中的Content-Type字段

            不能访问响应头部信息

            只支持GET和POST请求

        该对象的创建与发送请求的方法与XHR相似,但open()方法只含两个参数(请求类型,URL

        **所有的XDR请求都是异步执行的**

        eg:  var xdr = new XDomainRequest();

           xdr.onload =  function(){

             alert(xdr.responseText);

           }

           xdr.open("get",http://www.xxx.com/page/*);

           xdr.send(null)

        在接收到响应后,你只能访问响应的原始文本;没有办法确定响应的状态代码,只要成功就会触发load事件,如果失败触发error事件

        XDR提供了contentType属性,用来表示发送数据的格式,定义在open及send方法之间

      2.)其他浏览器对CORS的实现

        其他浏览器通过XMLHttpRequest对象实现对CORS的原生支持

        请求位于另外一个域中的资源,使用标准 的XHR对象并在open中的URL中传入绝对URL即可

          eg:    xhr.open("GET","http://www.somewhere.com/page/",true)

      3.) 带凭据的请求

        默认情况下,跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true,可以指定某个请求应该发送凭据

          

          XMLHttpRequest.withCredentials  属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。在同一个站点下使用withCredentials属性是无效的。

          此外,这个指示也会被用做响应中cookies 被忽视的标示。默认值是false。

          如果在发送来自其他域的XMLHttpRequest请求之前,未设置withCredentials 为true,那么就不能为它自己的域设置cookie值。而通过设置withCredentials 为true获得的第三方cookies,将会依旧享受同源策略,因此不能被通过document.cookie或者从头部相应请求的脚本等访问

      4.) 跨浏览器的CORS

        检测XHR是否支持CORS的最简单方法,就是检查是否存在withCredentials属性。再结合检测XDomainRequest对象是否存在

        eg: 

          function createCORSRequest(method,url){

            var xhr = new XMLHttpRequest();

            if("withCredentials" in xhr){    

              xhr.open(method,url,true)

            }else if(typeof XDomainRequest != "undefined"){    // IE

              xhr = new XDomainRequest

            }else{

              xhr = null

            }

            return xhr;         

          }

        var request = createCORSRequset("get","http://somewhere-else.com/page/")

        if(request){

          request.onload = function(){

            alert(request.responseText)

          }

          request.send()

        }

        

  • 相关阅读:
    系统管理命令之tty
    系统管理命令之id
    idea中使用junit测试时使用Scanner类无法正常测试
    002-字段不为null
    java8中接口中的default方法
    java之接口适配器
    java之对象适配器
    java之类适配器
    java之多态(六)
    java之多态(五)
  • 原文地址:https://www.cnblogs.com/john-hwd/p/10509480.html
Copyright © 2020-2023  润新知