美文网首页
javascript 跨域资源共享(CORS)

javascript 跨域资源共享(CORS)

作者: JeremyChi | 来源:发表于2017-09-07 15:38 被阅读0次

定义

CORS (Cross-Origin Resource Sharing)是W3C的一个工作草案,定义了在必须访问跨域资源时,浏览器与服务器应该如何沟通。

基本思想

使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是成功或者失败。

例子

比如一个简单的使用GET或POST发送的请求,它没有自定义的头部,在发送请求时,需要额外加一个Origin头:

 Origin: http://www.nczonline.net

如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin投不中回发相同的源信息(如果是公共资源,可以回发"*"):

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

IE & Modern Browser

IE

通过XDR(XDomainRequest)对象实现,有以下关键点:

  • 其Origin头部的值表示请求的来源域,且不可修改
  • cookie不会发送,也不会返回
  • 只能设置头部信息中的Content-Type字段
  • 不能访问响应的头部信息
  • 只支持GET和POST请求
  • 实例对象时只接收2个参数(请求类型和url),所有请求都是异步请求

Modern Browser

传入绝对路径的url,无需额外代码就可以触发CORS的行为

JSONP

利用<script>元素有能力不受限制的调用其他域加载资源的特性实现:

function handleResponse(response){
    alert("You re at IP address " + response.ip + ", which is in " + response.city + ", " + response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild);

有以下关键点:

  • 客户端和服务端需统一URL中的回调参数名
  • 这个<script>指向一个的文件,实则是包含可执行的js代码,执行了规定的回调函数,并将数据传到函数中

相关文章

网友评论

      本文标题:javascript 跨域资源共享(CORS)

      本文链接:https://www.haomeiwen.com/subject/zhpijxtx.html