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

2021-06-30 23:29:29 阅读：249 来源： 互联网

标签：协议 HTTP WebSocket 跨域 JavaScript CORS SSE 浏览器

浏览器相关知识

前端及时通信

短轮询

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 协议在 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

最方便

其他方案

标签：协议,HTTP,WebSocket,跨域,JavaScript,CORS,SSE,浏览器
来源： https://blog.csdn.net/qq_25482087/article/details/111335996

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9