跨域

跨域关键知识

同源策略

• 浏览器故意设计的一个功能限制

CORS

• 突破浏览器限制的一个方法

JSONP

• IE 时代的妥协

同源定义

源

• window.origin 或 location.origin 可以得到当前源
• 源 = 协议 + 域名 + 端口号

如果两个 URL 的

• 协议、域名、端口号
• 完全一致，那么这两个 URL 就是同源的

举例

• qq.con、 www.baidu.com 不同源
• baidu.com、 www.baidu.com 不同源
• 完全一致才算同源

同源策略定义

浏览器规定

• 如果 JS 运行在源 A 里，那么就只能获取源 A 的数据
• 不能获取源 B 的数据，即不允许跨域

举例（省略 http 协议）

• 假设 ivan.com/index.html 引用了 cdn.com/1.js
• 那么就说 1.js 运行在源 ivan.com 里
• 注意这跟 cdn.com 没有关系，虽然 1.js 从它那里下载
• 所以 1.js 就只能获取 ivan.com 的数据
• 不能获取 1.ivan.com 或者 qq.com 的数据

这是浏览器的功能！

• 浏览器故意要这样设计的

目的

• 保护用户隐私

如何跨域

方法一：CORS

问题根源

• 浏览器默认不同源之间不能互相访问数据

CORS

• 提前声明，共享数据
• 在需要共享数据的响应头里写可以访问的域名
• Access-Control-Allow-Origin：域名

JSONP

定义

• JSONP 和 JSON 没有关系

面临问题

• 没有 CORS，怎么跨域

JSONP 步骤

ivan.com 访问 qq.com

• qq.com 将数据写到 /friends.js
• ivan.com 用 script 标签引用 /friends.js
• /friends.js 执行，执行什么呢？
• ivan.com 事先定义好 window.xxx 函数
• /friends.js 执行 window.xxx({friends:[...]})
• 然后 ivan.com 就通过 window.xxx 获取到数据了
• window.xxx 就是一个回调！

什么是 JSONP？（优缺点）

什么是 JSONP

• 我们在跨域的时候由于当前浏览器不支持 CORS
• 或者因为某些条件不支持 CORS
• 我们必须使用另外一种方式来跨域
• 于是我们就执行一个 js 文件
• 这个 js 文件会执行一个回调，回调里面会有我们的数据
• 回调的名字随机生成，以 callback 的名字传给后台
• 后台把这个函数再次返回给我们并执行

优点

• 兼容 IE
• 可以跨域

缺点

• 由于是 script 标签，读不到 AJAX 那么精确的状态
• 不知道状态码，也不知道响应头，只知道成功和失败
• 只能发 GET 请求，不支持 POST