JavaScript 解决跨域问题的4种常见方式

拾柒

发布时间：2026-10-14 | 4人浏览过

原创

浏览器出于安全考虑实施了同源策略，导致域名、协议或端口不一致时无法直接发起请求。本文将深入解析利用 window.name、JSONP、$.getJSON 以及 Flash crossdomain.xml 这四种经典技术绕过限制的原理与操作。

什么是跨域请求

跨域是指当前页面的协议、域名或端口与请求资源的地址不完全一致。例如，假设当前页面域名为 http://www.example.com.cn/，如果尝试请求其他域名下的资源，由于浏览器的同源策略（Same-Origin Policy）限制，正常的 AJAX 请求将被拦截，从而产生跨域错误。

解决方案一：利用 window.name

window.name 属性的独特之处在于它可以在页面加载过程中持久化数据，且在不同域名间切换页面时不会丢失。这使得我们可以通过 iframe 在不同域之间传递数据。

第1步：配置服务端返回数据

服务器端需要将数据以字符串形式赋值给 window.name。注意，这里的数据通常是 JSON 格式的字符串。

<script>
    window.name='{"id":"3", "name":"leisure"}';
</script>

第2步：前端处理 iframe 加载逻辑

在客户端定义一个隐藏的 iframe，并监听其 onload 事件。核心逻辑是：第一次加载时记录状态并将 iframe 地址重置为同域页面以触发第二次加载；第二次加载时读取 window.name 中的内容。

<iframe id="iframe1" onload="iLoad"></iframe>
<script type="text/javascript">
    var load = false;
    function iLoad() {
        if(load == false) {
            // 第一次加载：设置同域地址，触发重新加载
            document.getElementById('iframe1').contentWindow.location = '/';
            load = true;
        } else {
            // 第二次加载：此时已处于同域，可安全获取数据
            var data = document.getElementById('iframe1').contentWindow.name;
            alert(data); // 输出: {"id":"3", "name":"leisure"}
            load = false;
        }
    }
</script>

第3步：触发表单提交（可选场景）

若需通过表单形式将数据传回或通过 target 指向 iframe，可设置 form 的 target 属性：

<form action="url" method="POST" target="iframe1">
    <button type="submit" value="submit" />
</form>

解决方案二：JSONP 原理与实现

JSON with Padding (JSONP) 利用了 HTML 中 <script> 标签不受同源策略限制的特性。服务端不再返回纯 JSON 数据，而是返回一段调用指定回调函数的 JavaScript 代码。

第1步：服务端构造响应

服务端接收请求后，将数据包装在回调函数名中返回。例如，回调函数名为 callback：

callback({"id": "3", "name": "leisure"});

第2步：前端定义回调函数并发起请求

在页面中预先定义好全局回调函数，然后通过动态插入或静态编写 script 标签来发起请求。参数 ?jsonp=callback 用于告知服务端使用哪个函数名进行包装。

<script type="text/javascript">
    function callback(data) {
        alert(data);
    }
</script>
<!-- 动态或静态引入远端脚本 -->
<script type="text/javascript" src="http://www.example.com.cn/product.jsp?id=5&jsonp=callback"></script>

解决方案三：jQuery.getJSON 简化操作

jQuery.getJSON 是对 JSONP 方式的封装，极大地简化了异步请求的流程。它自动处理回调函数的生成与注册。

$.getJSON(url + "?callback=?", data, function(data) {
    // 处理返回的数据
    console.log(data);
});

关键点说明：
必须保留 ?callback=? 参数。当 jQuery 检测到问号时，会自动生成一个唯一的随机函数名来替换问号，并通知服务端使用该名称包裹数据。实际上，jQuery.getJSON 在非本地同域请求时底层依然使用的是 JSONP 机制。

解决方案四：Flash crossdomain.xml 策略

对于基于 Flash 的富互联网应用（RIA），可以通过放置 crossdomain.xml 文件来声明允许哪些域名的 Flash 内容进行跨域访问。这是一种较早期的解决方案，随着 HTML5 和 CORS 的普及，现代 Web 开发中已较少使用。

第1步：创建 crossdomain.xml 文件

在目标服务器的根目录下创建该文件，明确指定允许的访问域。

<?xml version="1.0"?>
<cross-domain-policy>
    <allow-access-from domain="*.another.com.cn" />
</cross-domain-policy>

此配置表示允许来自 *.another.com.cn 子域下的 Flash 程序访问本服务器的数据。

总结

上述四种方式涵盖了从早期兼容方案到框架简化实践的不同层面。window.name 适合长期数据共享场景，JSONP 是旧时代解决跨域的主流方案，jQuery.getJSON 提供了便捷的 API 封装，而 crossdomain.xml 则属于特定技术栈（Flash）的安全策略。在现代开发中，除了以上方法，原生 CORS（Cross-Origin Resource Sharing）已成为标准的跨域解决方案，建议在支持新浏览器的项目中优先采用。

以上就是 JavaScript 跨域请求的4种解决方式的详细内容，更多关于 JavaScript 跨域优化的资料请关注本站其它相关文章！