前端：何为跨域，如何跨域

关键词

同源策略
浏览器设计的一个功能限制
CORS
突破同源策略的一个方法
JSONP
IE时代的补救办法

同源策略

（一）同源的定义：

• 源：源 = 协议+域名+端口
• 获取源的方法：window.origin
• 若是两个url的 协议名、域名、端口号 彻底一致，则称他们同源。

举例：
https://qq.com 和 https://www.baidu.com 不一样源
https://baidu.com 和 https://www.baidu.com 也不一样源
（二）同源策略定义

1. 浏览器规定：
   若是JS运行在源A中，那么就只能得到源A中的数据，不能得到源B中的数据，即不容许“跨域”
2. 举例：

   假设 https://oliver.com/index.html 引用了https://cdn.com/jQuery.js
   那么就说jQuery.js是运行在源 https://oliver.com 里
   因此jQuery.js只能得到 https://oliver.com 中的数据，而不能获取源 https://cdn.com 中的数据

（三）关键问题

• 浏览器没法区分请求的发送者

（四）同源策略的目的

• 为了保护用户隐私，防止用户我的数据被钓鱼网站偷走。

跨域的实现

解决方案一：CORS

1. 问题根源：
   浏览器默认不一样源之间不能相互访问数据
   但假设有两个不一样源的网站都属于我，我就是想要他们相互访问，那么我能够用CORS方法。
2. 使用方法：提早声明。
   在源A中增长响应头Access-Control-Allow-Origin: http://xxx.xxx
   这样就能够容许源 http://xxx.xxx 访问源A的数据了
3. 详细用法：去MDN瞅瞅

解决方案二：JSONP

1. 问题根源：
   IE不支持CORS啊！！！
2. 定义：
   利用script标签没有跨域限制来使用js包裹数据，达成和第三方数据通讯的一种跨域解决方案。

3. 步骤
   假设oliver.com想要访问db.com里的数据

   1. db.com中的数据写到/data.js里
   2. oliver.com用<script>引用db.com/data.js
   3. /data.js执行，执行什么呢？
   4. oliver.com提早定义好window.fn函数
   5. /data.js执行window.fn({data:[...]})
   6. 而后源oliver.com就经过window.fn获取到了数据
   • window.fn就是一个回调啊！
4. JSONP的优缺点

• 优势：

  1. 解决IE的兼容；
  2. 能够跨域；

• 缺点：

  1. 读取不到状态码等详细响应信息
  2. 只能发get请求，不支持post

总结：

1. 跨域实现了跨页面的数据通讯，是前端很是重要的一门技术点。
2. 个人github中写好了JSONP和CORS的demo 点击查看