前端(JavaScript)基础知识学习之浏览器相关与通信、跨域(CORS)

2021/7/1 1:22:26

本文主要是介绍前端(JavaScript)基础知识学习之浏览器相关与通信、跨域(CORS),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

浏览器相关知识

前端及时通信

短轮询

Comet

SSE

SSE 与 WebSocket 作用相似,都是建立浏览器与服务器之间的通信渠道,然后服务器向浏览器推送信息。
总体来说,WebSocket 更强大和灵活。因为它是全双工通道,可以双向通信;SSE 是单向通道,只能服务器向浏览器发送,因为流信息本质上就是下载。如果浏览器向服务器发送信息,就变成了另一次 HTTP 请求。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gdLHFJ2E-1608210834262)(/images/ryf-server-sent-events.jpg)]

但是,SSE 也有自己的优点。

  • SSE 使用 HTTP 协议,现有的服务器软件都支持。WebSocket 是一个独立协议。
  • SSE 属于轻量级,使用简单;WebSocket 协议相对复杂。
  • SSE 默认支持断线重连,WebSocket 需要自己实现。
  • SSE 一般只用来传送文本,二进制数据需要编码后传送,WebSocket 默认支持传送二进制数据。
  • SSE 支持自定义发送的消息类型。

websocket

WebSocket 协议在 2008 年诞生,2011 年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bkme1XhY-1608210834264)(/images/ryf-websocket.png)]
其他特点包括:

  • (1)建立在 TCP 协议之上,服务器端的实现比较容易。

  • (2)与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

  • (3)数据格式比较轻量,性能开销小,通信高效。

  • (4)可以发送文本,也可以发送二进制数据。

  • (5)没有同源限制,客户端可以与任意服务器通信。

  • (6)协议标识符是 ws(如果加密,则为 wss),服务器网址就是 URL。

  • 优点:真正意义上的实时双向通信,性能好,低延迟

  • 缺点:独立与 http 的协议,因此需要额外的项目改造,使用复杂度高,必须引入成熟的库,无法兼容低版本浏览器

webworker

service worker

浏览器同源

同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到 XSS、CSRF 等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KOYyGUqy-1608210834264)(/images/site-origin.webp)]

可实现跨域的标签
<link>
<img>
<script>

当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。常见跨域场景如下图所示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZKvHKoVs-1608210834265)(/images/cross-site-type.webp)]

如何实现跨域

JSONP

最经典

CORS

最流行

NGINX

最方便

其他方案



这篇关于前端(JavaScript)基础知识学习之浏览器相关与通信、跨域(CORS)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程