浏览器跨域通信

最新推荐文章于 2023-08-06 00:58:35 发布

cheung_seol

最新推荐文章于 2023-08-06 00:58:35 发布

阅读量471

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签：浏览器跨域

本文链接：https://blog.youkuaiyun.com/pepping798/article/details/52269794

web 专栏收录该内容

18 篇文章

订阅专栏

第一种 CORS

服务器设置头标：设置Access-Control-Allow-Origin

Access-Control-Allow-Origin: http://blog.youkuaiyun.com

浏览器，操作类似普通 XHR：

var xhr = new XMLHttpRequest();  
xhr.open("GET", "/hfahe", true);  
xhr.send();

完整浏览器端：

function createCORSRequest(method, url) {  
  var xhr = new XMLHttpRequest();  
  if ("withCredentials" in xhr) {  
    // 此时即支持CORS的情况  
    // 检查XMLHttpRequest对象是否有“withCredentials”属性  
    // “withCredentials”仅存在于XMLHTTPRequest2对象里  
    xhr.open(method, url, true);  

  } else if (typeof!= "undefined") {  

    // 否则检查是否支持XDomainRequest，IE8和IE9支持  
    // XDomainRequest仅存在于IE中，是IE用于支持CORS请求的方式  
    xhr = new XDomainRequest();  
    xhr.open(method, url);  

  } else {  

    // 否则，浏览器不支持CORS  
    xhr = null;  

  }  
  return xhr;  
}  

var xhr = createCORSRequest('GET', url);  
if (!xhr) {  
  throw new Error('CORS not supported');  
}

CORS与JSONP相比，更为先进、方便和可靠。

1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS（这部分会在后文浏览器支持部分介绍）。

第二种图像 ping

用 img 标签可以加在任何其他网页上的内容，没有跨域的限制。（埋点和谷歌统计的方式、广告跟踪浏览量）

var img = new Image();
img.obload = img.onerror = function(){
    alert("done.");
}
img.src = "htp://wwww.test.com?name=zhangxue";

缺点：只能发送 get 请求，不能访问服务区返回的响应内容。

第三种 JSONP

利用 script 标签的 src 不受跨域的限制，

优点：可以访问服务器返回响应的内容，支持浏览器和服务器之间的双向通信。

缺点：如果其他域是不安全的，返回内容夹杂恶意代码；难以确定 JSONP 请求是否失败，使用计时器定时检测

var scriot = document.createElement("script");
script.src ="htttp://www.test.com?callback=handleRes"
document.body.insertBefore(script, document.body.firstChild);