
【计】 cross-domain communication
中文:跨域通信
英文:Cross-Domain Communication
释义:指在浏览器环境下,不同源(协议、域名、端口任一不同)的网页或服务之间进行数据交换的技术机制。其核心目标是突破浏览器的同源策略(Same-Origin Policy)限制,实现安全可控的数据交互。
JSONP(JSON with Padding)
<script>
标签不受同源策略限制的特性,通过动态创建脚本请求跨域数据,服务器返回包裹在回调函数中的 JSON 数据。CORS(跨域资源共享,Cross-Origin Resource Sharing)
Access-Control-Allow-Origin
)声明允许访问的源。浏览器根据响应头决定是否允许跨域请求。Access-Control-Allow-Origin
: 指定可访问资源的源(如 *
或特定域名)。Access-Control-Allow-Methods
: 允许的 HTTP 方法(如 GET、POST)。WebSocket
PostMessage API
window.postMessage
发送消息,目标窗口通过 message
事件监听接收。Access-Control-Allow-Credentials: true
且 Access-Control-Allow-Origin
不能为 *
。参考资料
跨域通信是指浏览器中不同源(协议、域名、端口任一不同)的网页或服务之间进行数据交互的过程。由于浏览器的同源策略限制,默认禁止这种通信以保障用户信息安全。以下是详细解析:
同源策略限制
浏览器规定:若请求的协议(如 HTTP/HTTPS)、域名(如 example.com)或端口(如 8080)与当前页面不一致,则判定为跨域,会拦截响应数据。例如:
http://a.com
→ http://a.com/api
http://a.com
→ https://a.com
(协议不同)安全保护机制
防止恶意网站通过脚本窃取用户敏感数据(如 Cookie)。
CORS(跨域资源共享)
服务端通过设置响应头(如 Access-Control-Allow-Origin: *
)声明允许跨域请求。这是现代浏览器的标准方案,支持所有 HTTP 方法(GET/POST 等)。
JSONP
利用 <script>
标签不受同源策略限制的特性,通过动态创建脚本并指定回调函数名获取数据。仅支持 GET 请求。
代理服务器
前端通过同源的后端服务中转请求(如 Nginx 反向代理),隐藏真实跨域目标地址。
postMessage API
适用于窗口间通信(如 iframe 与父页面),通过 window.postMessage()
安全地传递数据。
如需完整技术细节,可参考来源网页(如腾讯云开发者社区 和 CSDN 博客)。
【别人正在浏览】