频道导航

常见的javascript跨域通信方法

2019-01-03 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了常见的javascript跨域通信方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文主要介绍几种常见的javascript跨域通信方法。首先讲解一下JSONP。

1、JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的

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

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

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

传递给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 代码如下：

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

设置好头信息之后，其他域就可以进行请求了。使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。 xhr.open('GET',' http://www.test2.com '); 接下来介绍另外一种实时通信方式：

3、Cross-document messaging

跨文档信息通信。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同原的web网页可以互相通信，也可以实现跨域通信。要想接受从其他窗口发送来的信息，必须对窗口对象的onmessage事件进行监听，其他窗口可以通过postmessage方法来传递数据，该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何js对象，第二个参数为接收消息的对象窗口的URL地址。下面进行试验，主页面index.HTML代码如下：

<Meta charset="utf-8"> 信息来自于另外一个域

试验结果如下：