美文网首页
浏览器跨域获取数据的六种方式

浏览器跨域获取数据的六种方式

作者: Oct1a | 来源:发表于2020-12-01 15:02 被阅读0次

只要 协议 、 域名 、 端口 有任何一个 不同, 都被当作是 不同的域。

1.CORS

CORS(Corss-Origin Resource Sharing,跨资源共享),基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应的成功或失败。即给请求附加一个额外的Origin头部,其中包含请求页面的源信息(协议、域名和端口),以便服务器根据这个头部决定是否给予响应。

2.document.domain

将页面的document.domain设置为相同的值,页面间可以互相访问对方的JavaScript对象。
注意:
不能将值设置为URL中不包含的域;
松散的域名不能再设置为紧绷的域名。

3.图像Ping

var img=new Image();
img.onload=img.onerror=function(){
... ...
}
img.src="url?name=value";
请求数据通过查询字符串的形式发送,响应可以是任意内容,通常是像素图或204响应。
图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。
缺点:
只能发送GET请求;
无法访问服务器的响应文本,只能用于浏览器与服务器间的单向通信。

4.Jsonp

var script=document.createElement("script");
script.src="url?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
JSONP由两部分组成:回调函数和数据
回调函数是接收到响应时应该在页面中调用的函数,其名字一般在请求中指定。
数据是传入回调函数中的JSON数据。
优点:
能够直接访问响应文本,可用于浏览器与服务器间的双向通信。
缺点:
JSONP从其他域中加载代码执行,其他域可能不安全;
难以确定JSONP请求是否失败。

这边可以使用我搭建的Jsonp服务,http://jsonp.dllca.cn/?url=需要解析的json链接。

5.Comet

Comet可实现服务器向浏览器推送数据。
Comet是实现方式:长轮询和流
短轮询即浏览器定时向服务器发送请求,看有没有数据更新。
长轮询即浏览器向服务器发送一个请求,然后服务器一直保持连接打开,直到有数据可发送。发送完数据后,浏览器关闭连接,随即又向服务器发起一个新请求。其优点是所有浏览器都支持,使用XHR对象和setTimeout()即可实现。
流即浏览器向服务器发送一个请求,而服务器保持连接打开,然后周期性地向浏览器发送数据,页面的整个生命周期内只使用一个HTTP连接。

6.WebSocket

WebSocket可在一个单独的持久连接上提供全双工、双向通信。
WebSocket使用自定义协议,未加密的连接时ws://;加密的链接是wss://。
var webSocket=new WebSocket("ws://");
webSocket.send(message);
webSocket.onmessage=function(event){
var data=event.data;
... ....
}

注意:
必须给WebSocket构造函数传入绝对URL;
WebSocket可以打开任何站点的连接,是否会与某个域中的页面通信,完全取决于服务器;
WebSocket只能发送纯文本数据,对于复杂的数据结构,在发送之前必须进行序列化JSON.stringify(message))。
优点:
在客户端和服务器之间发送非常少的数据,减少字节开销。

相关文章

  • 浏览器跨域获取数据的六种方式

    只要 协议 、 域名 、 端口 有任何一个 不同, 都被当作是 不同的域。 1.CORS CORS(Corss-O...

  • jsonp解决js读取本地json跨域问题

    一 、问题描述 通过ajax方式读取本地json文件,谷歌浏览器会提示跨域错误,导致获取不到json数据。 aja...

  • #hello,JS:15 同源策略 & 跨域(JSONP)

    跨域有几种常见的方式?你有没有跨域使用的经验? 方式: 使用jsonp实现跨域?使用cors实现跨域?浏览器另类的...

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • jsonp,ajax,json的问题

    JSONP JSONP是解决跨域问题的一种常见方式 跨域问题:因为浏览器有同源策略,所以当不同域间进行数据交互的时...

  • 前端使用nginx解决浏览器跨域

    一. 浏览器跨域 浏览器跨域限制,学名浏览器同源策略,其实是为了数据安全,由Netscape提出来限制浏览器访问跨...

  • 使用Nginx进行反向代理用于解决前端跨域问题

    最近写完了静态,准备向后端拿API直接拿数据做渲染测试,但是却因为跨域问题,造成了浏览器无法获取后端获取的数据 具...

  • 产生跨域的原因

    产生跨域的原因 浏览器的限制 跨域 XHR(XMLHttpRequest)请求 1、浏览器的限制 2、跨域 跨域概...

  • 2021-01-28面试题

    浏览器内多个标签页之间的通信方式有哪些 ? websocket 可跨域 postMessage 可跨域 work...

  • CORS

    由于浏览器同源策略(协议、域名、端口)的限制,当浏览器向跨源服务器发起请求时,会出现跨域。 解决跨域的方式有多种,...

网友评论

      本文标题:浏览器跨域获取数据的六种方式

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