JavaScript 跨域解决方案详解：从经典到现代实践

跨域的本质与产生条件

跨域是指一个域的脚本去访问另一个域的资源时，浏览器基于“同源策略”（Same-Origin Policy）产生的安全拦截机制。同源要求域名、协议和端口完全一致。当 a.com 试图获取 b.com 中的数据时，若不同源，浏览器默认拒绝响应，以保护用户数据不被恶意站点篡改或窃取。

尽管存在限制，但在实际业务中（如子域名共享 Cookie、前后端分离架构），跨域需求不可避免。以下是几种主流的实现方式及其局限性。

第1步：使用 JSONP 实现 GET 请求跨域

原理：利用 HTML <script> 标签不受同源策略限制的特性。通过在页面动态插入 script 标签，指向外部服务器的接口地址。服务端返回的不是纯 JSON，而是可执行的 JS 函数调用，参数即为所需数据。

操作要点：

• 仅支持 HTTP GET 请求。
• 依赖全局回调函数，存在 XSS 风险。

jQuery 实现示例：

$.ajax({
    url: 'http://b.com/dataServlet',
    dataType: 'jsonp',
    jsonp: 'jsoncallback', // 指定查询参数名
    jsoncallback: 'tqtan',  // 指定回调函数名
    success: function(data) {
        console.log(data.msg);
    },
    error: function(e) {
        console.log(e);
    }
});

服务端响应示例（Java）：

String callback = req.getParameter("callback");
PrintWriter out = resp.getWriter();
out.print(callback + "({\"msg\": \"hello\"})");

第2步：通过 document.domain 处理子域跨域

原理：将两个不同子域名的页面的 document.domain 属性设置为主域名，从而让它们被视为同源。

操作要点：

• 仅适用于主域名相同但子域名不同的场景（如 get.a.com 和 data.a.com）。
• 必须在所有相关页面同时设置，否则无效。
• 不能用于主域名不同的跨域。

第3步：利用 URL Hash 进行通信

原理：通过 iframe 嵌套，利用 URL 中的 hash 值（#后部分）传递数据。Hash 变化不会刷新页面，且父窗口可以读取嵌入窗口的 hash，反之则受同源限制，因此需要借助中间的代理页。

操作流程：

1. a.com/get.html 创建 iframe 指向 b.com/data.html 并携带 hash 参数。
2. b.com/data.html 读取 hash 处理后，创建 iframe 指向 a.com/proxy.html，并将结果写入其 hash。
3. a.com/proxy.html 修改父窗口 get.html 的 hash。
4. get.html 通过定时器监听 hash 变化获取数据。

第4步：使用 window.name 传输大数据

原理：window.name 在页面加载期间保持不变，即使页面跳转也不会丢失，且最大可存储 2MB 数据。利用此特性，先加载跨域页面获取 name 值，再将 iframe src 指向本地空页面，从而实现数据提取。

核心逻辑：

var state = 0, iframe = document.createElement('iframe');
iframe.src = 'http://b.com/data.html'; // 跨域源
iframe.onload = function() {
    if (state === 1) {
        var data = iframe.contentWindow.name;
        console.log(data); // 获取数据
        iframe.removeEventListener('load', loadfn);
    } else {
        state = 1;
        iframe.contentWindow.location = 'http://a.com/proxy.html'; // 跳回同源代理
    }
};
document.body.appendChild(iframe);

注意：跨域结束后需清除 iframe 以避免内存泄漏和安全风险。

第5步：HTML5 PostMessage 跨域通信

原理：HTML5 新增的 API，允许不同源窗口间安全地发送消息。发送方调用 postMessage()，接收方监听 message 事件。

优势：相比前几种方案，语法更简洁，支持双向通信，且能精确控制消息来源（origin）和接收目标，安全性更高。

实现示例：

发送方 (a.com/send.html)：

var iframe = document.createElement("iframe");
iframe.src = "http://b.com/receive.html";
document.body.appendChild(iframe);
// 第二个参数为接收域，* 表示允许所有，建议指定具体域名
iframe.contentWindow.postMessage("hello", "http://b.com");

接收方 (b.com/receive.html)：

window.addEventListener('message', function(event) {
    // 严格校验消息来源
    if (event.origin == 'http://a.com') {
        console.log(event.data);
        console.log(event.source);
    }
}, false);

第6步：后端配置 CORS 跨域资源共享

原理：CORS（Cross-Origin Resource Sharing）是现代浏览器支持的 W3C 标准。通过服务端添加特定的 HTTP 响应头，告知浏览器允许哪些源访问资源。这是目前最推荐的跨域解决方案，因为它是全功能支持（GET, POST, PUT 等）且对前端透明。

服务端配置：

服务器需要在响应头部中添加 Access-Control-Allow-Origin。例如在 Java Servlet 中：

response.setHeader("Access-Control-Allow-Origin", "*");
// 或者指定特定域名以保证安全
response.setHeader("Access-Control-Allow-Origin", "https://www.yourdomain.com");

前端代码：无需特殊处理，直接使用标准的 XMLHttpRequest 或 Fetch API 即可，浏览器会自动处理预检请求（Preflight）。

总结与建议

解决 JavaScript 跨域问题需要根据具体场景选择方案： - 若需兼容老旧浏览器且仅需 GET 请求，可使用 JSONP。 - 若主域名相同，document.domain 最简单，但限制较多。 - 若涉及复杂状态维持或大数据量，window.name 是优秀选择。 - 对于现代 Web 应用，PostMessage 是处理 iframe 通信的最佳实践。 - 对于大多数 AJAX/API 请求，强烈建议使用后端配置的 CORS，它安全、标准且无额外前端复杂度。

以上就是 JavaScript 跨域问题解决方案的详细内容，更多关于前端跨域技巧的资料请关注本站其它相关文章！