跨域处理

跨域

• 1、什么是跨域
• 2、跨域方法
  • 2.1 JSONP
  • 2.2 CORS
  • 2.3 window.postMessage
  • 2.4 window.name
  • 2.5 document.domain
• 3、跨域方式间比较

1、什么是跨域

概念：只要不遵循同源策略的请求，都被当作是跨域的。

同源策略（same-origin policy）：浏览器出于安全方面的考虑，只允许本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读取对方的资源。

这里的本域指：

• 同协议： 如均为http或https协议
• 同域名： 如github.com/jazen和github.com/Tony
• 同端口： 如均为80端口或8080端口

也就是说只要协议、端口、域名这三者中有一者不同，则可以说是跨域的。
下面是一个关于JavaScript能否跨域通信的例子，以 http://www.aaa.com/a.js 访问以下URL的结果。见下表：

URL	说明	是否允许通信
http://www.aaa.com/b.js	同一域名下	√
http://www.aaa.com/script/b.js	同一域名下，不同文件夹	√
http://www.aaa.com:8080/b.js	同一域名，不同端口	×
https://www.aaa.com/b.js	同一域名，不同协议	×
http://127.0.0.1/b.js	域名和域名对应的IP	×
http://script.aaa.com/b.js	主域相同，子域不同	×
http://aaa.com/b.js	同一域名，不同二级域名（同上）	×
http://www.bbb.com/b.js	不同域名	×

对于端口和协议的不同，只能通过后台来解决。前端针对不同域名，则有以下几种解决方案。

2.1、JSONP

JSONP（JSON with Padding）：一种用于解决AJAX跨域问题的方案。（把JSON包裹在回调函数中传回，这个padding就可以理解为这个回调函数）

原理： AJAX由于受到同源策略的限制无法跨域，但带有 src 属性的标签（例如

页面B http://127.0.0.1:8080/s/second.html 代码

I'm second level index

window.postMessage result

2.4、window.name

window.name： 在一个窗口(window)的生命周期内，窗口载入的所有页面共享一个 window.name，每个页面对 window.name 都有读写权限， window.name 持久存在一个窗口载入过的所有页面中。

问题来源： 当我们设置一个iframe时，若不遵守同源策略，则无法获取其中的数据。当插入如下代码时，会因为违反同源策略而报错。