navigator.sendBeacon
发送网络请求的方式 AJAX（xml 是代表） fetch sse websocket jsonp image 的 src navigator.sendBeacon 使用 navigator.sendBeacon 实现高效的数据上报在 web 开发中，我们经常需要将用户行为或性能数据上报到服务器。为了不影响用户体验，开发者通常会在页面卸载时进行数据上报。然而，传统的数据上报方式，如 XMLHtt
WebSocket
定义websocket 是一种建立在浏览器和服务器之间建立长时间稳定连接的技术，在单个 tcp 连接上进行全双工通信的网络协议，可以实现服务器（客户端）和服务器之间的双向数据包传递，且不受跨域限制 使用场景客户端和服务端连续长时间互相通信如 实时性要求较高的应用，如网络游戏、数据可视化大屏、在线聊天等 需要频繁交换数据的应用，比如在线编辑器、文件管理器等 需要推送服务的应用，比如实时数据监控、通
SSE（Server-Sent Event）
SSE 简介Server-Sent Event，是一种基于 HTTP 协议建立的服务端与浏览器之间的长连接，是一种单工通信方式，仅服务端向客户端发送消息 特点单工通讯长连接，server 向浏览器持续发送新数据 技术实现基于 HTTP 协议 数据格式文本数据 跨域浏览器跨域限制 状态open message Error 服务端使用 建立 SSE 连接 123res.writeHead(200, &
ajax xml fetch
AJAX 技术ajax, Asynchronous Javascript and XML，异步 javascript 和 XML 技术，是一种早期的用于客户端和服务端异步数据交互的技术 特点在不刷新页面的情况下从服务器获取数据或提交表单，异步增量式更新页面内容 Ajax 通信与数据格式无关，数据格式并不一定是 XML 优点提高用户体验通过减少页面的重载和刷新，使得网站变得更加灵活和动态。 减轻服务
解决跨域——运维端nginx
ubuntu 12apt-get nginxcd etc/nginx/sites-available/default 123location /api { proxy_pass http://server_ip:server_port;}
解决跨域——前后端协商jsonp
JSONP 原理1.什么是 JSONPJSONP（JavaScript with padding）是 JSON 的一种“使用方式”，可用于解决主流浏览器的跨域数据访问问题。 2.JSONP 原理由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是<script>标签不受浏览器同源策略的影响，所以可以通过 src 属性，请求非同源的 js 脚本。 因此，JSON
解决跨域——后端CORS
什么是 CORSCross origin resource sharing，跨域资源共享，主要出现在两种情况下： 前后端分离的开发模式下（separation of front and back stage），前后端服务运行在不同的 domain，前端请求后端数据属于 CORS 前端请求第三方不同 domain 的数据资源 CORS 分类默认情况下的跨域请求过程主要分为两类：第一类是安全请
解决跨域——前端代理
仅能在开发环境下配合 webpack、vite、rollup 等前端构建打包工具使用。 注意：生产环境需要配合 nginx 代理 12前端 5173端口后端 3000端口 1234567891011121314151617181920<!DOCTYPE html><html lang="en"> <head> <meta ch