脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript跨域方法

JavaScript跨域方法汇总

 更新时间：2014年10月16日 08:43:48   作者：四火  
这篇文章主要介绍了JavaScript跨域方法汇总,本文总结了12种JavaScript的跨域方法,需要的朋友可以参考下

做Web开发经常需要面对跨域问题，跨域问题的根源是浏览器安全中的同源策略，比如说，对于http://www.a.com/1.html来说：

1.http://www.a.com/2.html是同源的；
2.https://www.a.com/2.html是不同源的，原因是协议不同；
3.http://www.a.com:8080/2.html是不同源的，原因是端口不同；
4.http://sub.a.com/2.html是不同源的，原因是主机不同。

在浏览器中，<script>、<img>、<iframe>和<link>这几个标签是可以加载跨域（非同源）的资源的，并且加载的方式其实相当于一次普通的GET请求，唯一不同的是，为了安全起见，浏览器不允许这种方式下对加载到的资源的读写操作，而只能使用标签本身应当具备的能力（比如脚本执行、样式应用等等）。

最常见的跨域问题是Ajax跨域访问的问题，默认情况下，跨域的URL是无法通过Ajax访问的。这里我记录我所了解到的跨域的方法：

1. 服务器端代理，这没有什么可说的，缺点在于，默认情况下接收Ajax请求的服务端是无法获取到的客户端的IP和UA的。

2. iframe，使用iframe其实相当于开了一个新的网页，具体跨域的方法大致是，域A打开的母页面嵌套一个指向域B的iframe，然后提交数据，完成之后，B的服务端可以：

●返回一个302重定向响应，把结果重新指回A域；
●在此iframe内部再嵌套一个指向A域的iframe。

这两者都最终实现了跨域的调用，这个方法功能上要比下面介绍到的JSONP更强，因为跨域完毕之后DOM操作和互相之间的JavaScript调用都是没有问题的，但是也有一些限制，比如结果要以URL参数传递，这就意味着在结果数据量很大的时候需要分割传递，甚是麻烦；还有一个麻烦是iframe本身带来的，母页面和iframe本身的交互本身就有安全性限制。

3. 利用script标签跨域，这个办法也很常见，script标签是可以加载异域的JavaScript并执行的，通过预先设定好的callback函数来实现和母页面的交互。它有一个大名，叫做JSONP跨域，JSONP是JSON with Padding的略称。它是一个非官方的协议，明明是加载script，为啥和JSON扯上关系呢？原来就是这个callback函数，对它的使用有一个典型的方式，就是通过JSON来传参，即将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。

在互联网上有很多JSONP的服务来提供数据，本质上就是跨域请求，并且在请求URL中指定好callback，比如callback=result，那么在获取到这些数据以后，就会自动调用result函数，并且把这些数据以JSON的形式传进去，例如（搜索“football”）：

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=football&callback=result

使用JQuery来调用就写成：

复制代码 代码如下:

$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=football&callback=?",function(data){
    //...
});

总的来说，JSONP的跨域方式的局限性在于，只能使用GET请求，并且不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

4. Flash跨域：

它会访问目标网站根目录下面的crossdomain.xml文件，根据文件中的内容来确定是否允许此次跨域访问：

复制代码 代码如下:

<cross-domain-policy>
    <allow-access-from domain="xxx.xxx.com" />
</cross-domain-policy>

5. img标签也可以使用，这也是一种非常常见的方法，功能上面弱一点，只能发送一个get请求，没有什么回调，Google的点击计数就是这样确定的。

6. window.PostMessage，这个算是HTML5新加入的为跨域通讯考虑的机制，只有Firefox 3、Safari 4和IE8及之后的版本支持。使用它向其它窗口发送消息的调用方式如下：

复制代码 代码如下:

otherWindow.postMessage(message, targetOrigin);

在接收的窗口，需要设置一个事件处理函数来接收发过来的消息：
复制代码 代码如下:

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
    if (event.origin !== "http://example.org:8080")
        return;
}

注意这里必需要使用消息的origin和source属性来验证发送者的身份，否则会造成XSS漏洞。

7. Access Control

有一些浏览器支持Access-Control-Allow-Origin这样的响应头，比如：

复制代码 代码如下:

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

就指定了允许对www.a.com跨域访问。

8. window.name

这个东西其实以前被用作黑客XSS的手段，其本质是，当window的location变化的时候，页面会重新加载，但是有趣的是，这个window.name居然不发生变化，那么就可以用它来传值了。配合iframe，改变几次iframe的window对象，就完成了实用的跨域数据传递。

9. document.domain

这个方式适用于a.example.com和b.example.com这种跨域的通信，因为二者有一个共有的域，叫做example.com，只要设置document.domain为example.com就可以了，但是如果a.example1.com和b.example2.com之间要通信，它就没办法了。

10. Fragment Identitier Messaging（FIM）

这个方法很有意思，也需要iframe的配合。Fragment Identitier就是URL的井号（#）后面的经常用于锚点定位的部分，这部分的改变不会导致页面刷新，母窗口可以随便访问iframe的URL，而iframe也可以随便访问母窗口的URL，那这二者之间就可以通过改变Fragmement Identitier来实现通信了。缺点是Fragmement Identitier的改变会产生不必要的历史记录，而且也有长度限制；另外，有的浏览器不支持onhashchange事件。

11. Cross Frame（CF）

这种方法是上述FIM方法的变种，CF和FIM的本质其实在我的《GWT初体验》这篇文章里面都有介绍（只不过是被用来实现历史和后退功能了），它会动态创建一个不可见的iframe，指向异域，处理完以后，这个iframe的URL中的Fragment Identitier包含了处理结果，供母页面访问，而浏览器的URL没有任何变化。

12. Cookie+P3P协议

利用P3P协议下跨域访问Cookie的特性，来实现跨域访问，也算一奇招。P3P是W3C公布的一项隐私保护推荐标准，旨在为网上冲浪的Internet用户提供隐私保护。把Cookie的path设置为“/”，即没有任何域的限制，这个时候有的浏览器下面允许别的URL的页面来读取，有的则不允许，这种情况下需要在母页面响应的头上面设置P3P的头：

复制代码 代码如下:

P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"

您可能感兴趣的文章:

相关文章

  • 小试JavaScript多线程

    小试JavaScript多线程

    这两天一直在弄ajax，用多了才发现了ajax 的cache问题，请求了好多次，得到了确是相同的结果，经常我想在请求的同时去做一些其它的事情，我在想javascript里有没有办法用多线程，经过在网上查找找到了结果。
    2008-11-11
  • 面试官常问之说说js中var、let、const的区别

    面试官常问之说说js中var、let、const的区别

    var、let和const都是JavaScript中用来声明变量的关键字,并且let和 const关键字是在 ES6 中才新增的,下面这篇文章主要给大家介绍了关于var、let、const区别的相关资料,需要的朋友可以参考下
    2022-03-03
  • JavaScript对象学习小结

    JavaScript对象学习小结

    JavaScript 中的所有事物都是对象：字符串、数值、数组、函数.几乎用到的每个js都离不开它的js对象。此外，JavaScript 允许自定义对象，下面跟着小编学习javascript对象学习小结，需要的朋友可以参考下
    2015-09-09
  • 小程序实现商品属性选择或规格选择

    小程序实现商品属性选择或规格选择

    这篇文章主要为大家详细介绍了小程序实现商品属性选择或规格选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 用js实现博客打赏功能

    用js实现博客打赏功能

    经常在一些博客中看到有一个打赏功能，本篇文章主要介绍了博客打赏功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2016-10-10
  • webpack模块化的原理解析

    webpack模块化的原理解析

    webpack 中实现模块化的核心就是 __webpack_require__ 函数，无论是commonjs模块化还是es 模块都是通过该函数来导入的，这篇文章主要介绍了webpack模块化的原理,需要的朋友可以参考下
    2023-02-02
  • javascript实现计算器功能

    javascript实现计算器功能

    这篇文章主要为大家详细介绍了javascript实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js中parseInt()诡异行为的探究与改正

    js中parseInt()诡异行为的探究与改正

    这篇文章主要给大家介绍了关于js中parseInt()诡异行为的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • WebGL高级变换之Matrix4使用介绍

    WebGL高级变换之Matrix4使用介绍

    这篇文章主要为大家介绍了WebGL高级变换之Matrix4使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • 深入探究JS中的异步编程和事件循环机制

    深入探究JS中的异步编程和事件循环机制

    js是单线程事件循环模型，同步操作与异步操作时代码所依赖的核心机制，异步行为是为了优化因计算量大而时间长的操作，本文详细给大家介绍了JS中的异步编程和事件循环机制，文中有详细的代码示例,需要的朋友可以参考下
    2023-05-05

最新评论