JavaScript跨域总结

谁借莪１个温暖的怀抱￠ 2022-05-21 02:27 201阅读 0赞

转载：http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html\#m3

### 什么是跨域 ###

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

<table style="margin-left:10px;border:1px solid #C0C0C0;border-spacing:0px;color:rgb(51,51,51);font-family:Tahoma, Arial, '宋体', sans-serif;font-size:14px;background-color:rgb(255,255,255);"> 
 <tbody> 
  <tr> 
   <th style="color:rgb(0,0,0);border-color:rgb(187,187,187);border-collapse:collapse;background:rgb(222,231,236);">URL</th> 
   <th style="color:rgb(0,0,0);border-color:rgb(187,187,187);border-collapse:collapse;background:rgb(222,231,236);">说明</th> 
   <th style="color:rgb(0,0,0);border-color:rgb(187,187,187);border-collapse:collapse;background:rgb(222,231,236);">是否允许通信</th> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/a.js<br>http://www.a.com/b.js</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">同一域名下</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">允许</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/lab/a.js<br>http://www.a.com/script/b.js</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">同一域名下不同文件夹</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">允许</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com:8000/a.js<br>http://www.a.com/b.js</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">同一域名，不同端口</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">不允许</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/a.js<br>https://www.a.com/b.js</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">同一域名，不同协议</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">不允许</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/a.js<br>http://70.32.92.74/b.js</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">域名和域名对应ip</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">不允许</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/a.js<br>http://script.a.com/b.js</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">主域相同，子域不同</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">不允许</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/a.js<br>http://a.com/b.js</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">同一域名，不同二级域名（同上）</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">不允许（cookie这种情况下也不允许访问）</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">http://www.cnblogs.com/a.js<br>http://www.a.com/b.js</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">不同域名</td> 
   <td style="border-color:rgb(187,187,187);border-collapse:collapse;">不允许</td> 
  </tr> 
 </tbody> 
</table>

特别注意两点：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，

第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。  
“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

接下来简单地总结一下在“前台”一般处理跨域的办法，后台proxy这种方案牵涉到后台配置，这里就不阐述了，有兴趣的可以看看yahoo的这篇文章：《[JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls][JavaScript_ Use a Web Proxy for Cross-Domain XMLHttpRequest Calls]》

常见跨域解决方法

XHR2

HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不支持

jsonP

原理： ajax本身是不可以跨域的，通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。其实设置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。

js中几种实用的跨域方法原理详解 ： http://www.cnblogs.com/2050/p/3191744.html

[JavaScript_ Use a Web Proxy for Cross-Domain XMLHttpRequest Calls]: http://developer.yahoo.com/javascript/howto-proxy.html