一、同源策略

同源定义

1. 源

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

2. 如果两个 url 的

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

3. 举例

• qq.com、https://www.baidu.… 不同源
• ttps://baidu.com、www.baidu.com 不同源
• 完全一致才算同源

同源策略定义

1. 浏览器规定

• 如果 JS 运行在源 A 里，那么就只能获取源 A 的数据，不能获取源 B 的数据，即不允许跨域 2.举例（省略 http 协议）
• 假设 xxx.com/index.html 引用了 cdn.com/1.js
• 那么就说「1.js 运行在源 xxx.com 里」
• 注意这跟 cdn.com 没有关系，虽然 1.js 从它那下载
• 所以 1.js 就只能获取 xxx.com 的数据
• 不能获取 1.xxx.com 或者 qq.com 的数据
• 这是浏览器的功能！浏览器这样做的目的是为了保护用户隐私

二、如何跨域

解法一：CORS

1. 问题根源

• 浏览器默认不同源之间不能互相访问数据
• 但是 qq.com 和 xxx.com 其实都是我的的网站，就是想要两个网站互相访问，浏览器为什么阻止

2. 用 CORS

• 浏览器说，如果要共享数据，需要提前声明！
• 那怎么声明呢？
• 浏览器说，qq.com 在响应头里写 xxx.com 可以访问
• 哦，具体语法呢？
• Access-Control-Allow-Origin: foo.example

解法二：JSONP

1. 定义

• IE不支持CORS
• JSONP 和 JSON 没有关系
• 具体定义看后面代码

2. 步骤

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