什么是同源
源
window.origin或localtion.origin可以得到当前的源- 源 = 协议 + 域名 + 端口号
如果两个 url 的 协议、 域名、 端口号完全一致，那么这两个 url 就是同源的
小栗子：https://juejin.cn/与www.baidu.com不同源https://baidu.com与https://www.baidu.com不同源
完全一致才算同源
什么是跨域
当你点击 MDN 的时候就发生了跨域,因为不同源
同源策略
说到跨域就要说说同源策略
浏览器规定
- 如果JS运行在源A里，那么就只能获取源A的数据
- 不能获取源B的数据，即不允许跨域 目的：为了保护用户隐私 故 同源策略就是不同源的页面之间，不准互相访问数据
JSONP 跨域
注：JSONP 和 JSON 没有任何关系
思路：\
- 在需要兼容 ie， 不可以使用CORS 的情况下，该如何跨域呢？
- 我们可以随便引用网站的JS(BootCDN)
- 虽然我们不可以去访问数据（JSON、MySql、SQL）
- 但是我们可以引用JS
- 那可不可以让JS里面拿到数据呢？
步骤
- 让 hhh.com 访问 qq.com
- qq.com 将数据写到 /friends.js
- hhh.com 用 script 标签引用 /friends.js
- /friends.js执行
- hhh.com 事先定义好 window.xxx 函数
- /friends.js 执行 window.xxx({fridens: [...]})
- 然后 hhh.com 就通过 window.xxx 获取到了数据（window.xxx 不就是回调吗？？？）
优化一下
只要 hhh.com 和 qq.com/friends 执行的函数名是同一个即可，那就可以直接把名字给 /friends.js
再优化
封装成 jsonp('url').then(f1, f2)
缺点
- script标签是读取不到响应头(Set-Cookie)的，只能知道成功/失败,并且只能发get请求，不支持post
CORS 跨域
不需要考虑 ie 的话，如果要共享数据需要提前声明，那么就需要在响应头里加要访问的origin
Access-Control-Allow-Origin: origin
Access-Control-Allow-Origin: https://developer.mozilla.org
