1. **JSONP (JSON with Padding)**
JSONP是一种非正式传输协议，并不依赖于XMLHttpRequest对象发起HTTP请求。它通过动态创建`<script>`标签指向需要访问的服务端API地址的方式绕过同源政策约束。服务端返回一段可执行脚本，通常是一个调用预先定义好的回调函数并将所需的数据作为参数传递给该函数的形式。这种方法只支持GET方式获取数据且存在一定的安全性风险。
2. **CORS(Cross-Origin Resource Sharing) 跨站资源共享**
CORS是W3C标准的一种机制，允许服务器标示哪些来源可以访问其资源。当发送Ajax 请求到另一域名下的接口时，目标服务器会在响应头(`Access-Control-Allow-Origin`) 中指明是否同意本次跨域请求。若接收到了肯定的回答，则前端就可以正常读取返回的内容了。
在客户端使用 XMLHttpRequest 或 Fetch API 发送带凭据的复杂请求至开启了 CORS 的服务器时，除了设置 `Access-Control-Allow-Origin` 头部外还需要其他相关头部如：`Access-Control-Allow-Methods`, `Access-Control-Allow-Headers`, 和 `Access-Control-Allow-Credentials` 等以满足各种需求场景。
3. **postMessage API**
HTML5 提供了一个window.postMessage() 方法用于解决来自不同窗口、文档或 iframe 之间的通信问题，从而间接实现了跨越不同的域进行消息传递的功能。此方法接受两个主要参数——要传送的消息内容与目的页面所在的源(即URL)，只有指定的目标源才能接收到这条 post 消息并在监听事件上处理相应逻辑。
4. **WebSocket 协议**
WebSocket 是一种双向通讯技术，可以在单个TCP连接之上提供全双工通道。对于涉及实时性和高效率要求的应用而言，这是一个非常理想的选择。虽然建立之初也需要遵循特定握手过程完成一次"升级", 成功后即可无视传统的同源策略自由地向任何已授权的目的服务器收发报文。
总结来说，针对实际应用场景选择合适的跨域解决方案至关重要。从简单的静态文件引用到复杂的前后台数据同步乃至高级别的即时互动体验都有相应的技术支持保障。理解这些技术和它们的工作原理不仅能帮助我们编写出高效稳定的代码，也有助于我们在构建大规模web应用程序过程中更好地应对各类挑战。
标签： js如何跨域
