JavaScript 跨域通信的三种常见实现方案

作者：半夏时间：2026-10-29 19:40:42浏览：663

本文详细解析 JavaScript 中常见的跨域通信方法，包括基于 script 标签的 JSONP、基于 HTTP 头部的 CORS 以及基于 Window 接口的 postMessage。文章通过具体代码示例，对比了各方案的实现原理、配置步骤及安全特性，帮助开发者根据实际需求选择合适的数据交互方式。

JSONP 跨域原理与实现

本文主要介绍几种常见的 JavaScript 跨域通信方法。首先讲解一下 JSONP。 1、JSONP JSONP（JSON with Padding）是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。下面我们来介绍下 JSONP 的具体实现。我们知道，哪怕跨域 js 文件中的代码（当然指符合 web 脚本安全策略的），web 页面也是可以无条件执行的。远程服务器 remoteserver.com 根目录下有个 remote.js 文件代码如下： alert('我是远程文件'); 本地服务器 localserver.com 下有个 jsonp.html 页面代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title></title> 
 <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> 
</head> 
<body> 
 
</body> 
</html>

毫无疑问，页面将会弹出一个提示窗体，显示跨域调用成功。

现在我们在 jsonp.html 页面定义一个函数，然后在远程 remote.js 中传入数据进行调用。jsonp.html 页面代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title></title> 
 <script type="text/javascript"> 
 var localHandler = function(data){ 
  alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result); 
 }; 
 </script> 
 <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> 
</head> 
<body> 
 
</body> 
</html>

remote.js 文件代码如下： localHandler({"result":"我是远程js带来的数据"}); 成功运行，看来跨域远程获取数据的目的实现了，但是又一个问题出现了，我怎么让远程 js 知道它应该调用的本地函数叫什么名字呢？这时我们就需要将服务端提供的 js 脚本动态生成就行了，调用者可用通过传参告诉服务端自己需要什么函数，jsonp.html 的代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title></title> 
 <script type="text/javascript"> 
 // 得到航班信息查询结果后的回调函数 
 var flightHandler = function(data){ 
  alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。'); 
 }; 
 // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码） 
 var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; 
 // 创建script标签，设置其属性 
 var script = document.createElement('script'); 
 script.setAttribute('src', url); 
 // 把script标签加入head，此时调用开始 
 document.getElementsByTagName('head')[0].appendChild(script); 
 </script> 
</head> 
<body> 
 
</body> 
</html>

这次的代码变化比较大，不再直接把远程 js 文件写死，而是编码实现动态查询，而这也正是 jsonp 客户端实现的核心部分，本例中的重点也就在于如何完成 jsonp 调用的全过程。我们看到调用的 url 中传递了一个 code 参数，告诉服务器我要查的是 CA1998 次航班的信息，而 callback 参数则告诉服务器，我的本地回调函数叫做 flightHandler，所以请把查询结果传入这个函数中进行调用。这个叫做 flightResult.aspx 的页面生成了一段这样的代码提供给 jsonp.html（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）：


flightHandler({ 
 "code": "CA1998", 
 "price": 1780, 
 "tickets": 5 
});

CORS 跨域资源共享配置

传递给 flightHandler 函数的是一个 json，它描述了航班的基本信息。运行一下页面，成功弹出提示窗口，jsonp 的执行全过程顺利完成！但是 JSONP 存在一点问题，就是由远程服务端负责包装 json 数据，并调用命名函数，这种方式存在安全隐患，在使用 JSONP 时，必须完全信任服务端所提供的数据，恶意脚本就可以直接接管我们的应用。所以接下来我们要介绍一种别的方式，来避免这种安全隐患。 2、CORS CORS（Cross OriginResource Sharing，跨源资源共享）实现了跨源 XMLHttpRequests，跨源 HTTP 请求包括一个 Origin 头部，它为服务器提供 HTTP 请求的源信息。头部由浏览器保护，不能被应用程序代码更改。这种方式远比评估外部输入的方式安全。以前的 ajax 只能同源请求，现在通过 XMLHttpRequests 二级，可以进行跨域请求。假设我们页面或者应用已在 http://www.test1.com 上了，而我们打算从 http://www.test2.com 请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回“源不匹配”的错误，"跨域"也就以此由来。利用 CORS，http://www.test2.com 只需添加一个标头，就可以允许来自 http://www.test1.com 的请求。php 代码如下：


header("Access-Comtrol-Allow-Origin:*");<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

其中 * 表示允许任何域向我们的服务端提交请求。也可以设置指定的域名，代码如下：


header("Access-Control-Allow-Origin:http://www.test2.com");

Cross-document messaging 跨文档通信

设置好头信息之后，其他域就可以进行请求了。使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。 xhr.open('GET', ' http://www.test2.com '); 接下来介绍另外一种实时通信方式： 3、Cross-document messaging 跨文档信息通信。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同原的 web 网页可以互相通信，也可以实现跨域通信。要想接受从其他窗口发送来的信息，必须对窗口对象的 onmessage 事件进行监听，其他窗口可以通过 postmessage 方法来传递数据，该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何 js 对象，第二个参数为接收消息的对象窗口的 url 地址。下面进行试验，主页面 index.html 代码如下：


<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title></title> 
 </head> 
<script type="text/javascript"> 
 function sendIt(){ 
  document.getElementById("otherPage").contentWindow 
  .postMessage(//向子窗口发出请求 
   document.getElementById("message").value,//值 
   "http://127.0.0.1:8020"//目标域 
  ) 
 } 
</script> 
 <body> 
  <iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html" id="otherPage" width="" height=""></iframe> 
  <br /><br /> 
  <input type="text" name="message" id="message" value="" /> 
  <input type="button" name="" id="" value="发送跨域消息" onclick="sendIt();" /> 
 </body> 
</html>

窗口所引用页面 other.html 代码如下：


<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title></title> 
<script type="text/javascript"> 
 window.addEventListener("message",function(event){//通过onmessage监听 
  //将从父窗口传来的数据展现出来 
  document.getElementById("content").innerHTML+=event.data+"<br>"; 
 },false); 
</script> 
 </head> 
 <body> 
  信息来自于另外一个域 
  <div id="content"> 
    
  </div> 
 </body> 
</html>

试验结果如下：

JSONP 跨域原理与实现

可以看到在 81 端口服务器中的 index.html 和 8020 端口的服务器中的 other.html 进行的通信。完整代码如下：


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
<script type="text/javascript">
 function sendIt(){
 document.getElementById("otherPage").contentWindow
 .postMessage(//向子窗口发出请求
 document.getElementById("message").value,//值
 "http://127.0.0.1:8020"//目标域
 )
 }
</script>
 <body>
 <iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html" id="otherPage" width="" height=""></iframe>
 <br /><br />
 <input type="text" name="message" id="message" value="" />
 <input type="button" name="" id="" value="发送跨域消息" onclick="sendIt();" />
 </body>
</html>

CrossDocumentMessaging_index.html


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
<script type="text/javascript">
 window.addEventListener("message",function(event){//通过onmessage监听
 //将从父窗口传来的数据展现出来
 document.getElementById("content").innerHTML+=event.data+"<br>";
 },false);
</script>
 </head>
 <body>
 信息来自于另外一个域
 <div id="content">
 
 </div>
 </body>
</html>

以上就是本文的全部内容，希望对大家了解熟悉常见的 javascript 跨域通信方法有所帮助。

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13