前端培训-中级阶段（11、12）- 跨域请求原理以及实现（2019-08-22期）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

JSONP 跨域请求原理以及实现方式jQuery封装的Ajax调用和JSONP数据跨域请求原理和实现

这节题目有点奇怪啊。
上节我们讲了同源策略，这节我们讲讲如何跨域。这东西就和产品提需求一样，我知道不合理，但是我就想要。

跨域分类

1. iframe 跨域
   比如 www.51vv.com 的一部分（header吧），我 k.51vv.com 也想用。默认情况下不同源，是不允许的。那我们怎么办呢？
   

   1. domain
   2. postMessage

2. ajax 跨域

   1. JSONP
   2. CORS
   3. 服务器代理

3. canvas 资源跨域

   1. image 跨域

4. script 资源跨域

   1. Script error.
      为了提升网站的访问速度，我们通常都会将静态资源文件(css, image, javascript)放在CDN。当这些从CDN的JavaScript脚本执行出错，因为违背了同源策略, 为了保证用户信息不被泄露，错误信息不会显示出来，取而代之只会返回一个Script error.。

ajax 跨域方案

这部分知识是我们开发中经常会遇到的。下面我们来介绍一下常见的几种方法。

JSONP 跨域方案

JSONP 优缺点

1. 优点

   1. 浏览器兼容性强（全支持）

2. 缺点

   1. 不安全（嵌入异常逻辑代码）
   2. 只能发GET请求

JSONP 原理

下面我们来说一下JSONP的原理，顺便分析一下上面的优缺点。

1. 首先 script 标签引入的代码，不管跨不跨域都可以执行。常见的就是CDN的资源，我们拿来使用。
2. 正常的JSON数据为{code: 200, res: [{id:1,state:0},{id:2,state:1}]}。
   如果我们 script 标签引入的资源就是带数据的。
   比如console.log({code: 200, res: [{id:1,state:0},{id:2,state:1}]})，这样不就等于拿到了数据？
3. 服务端拼接callback名称，动态生成返回数据。

从上面的原理看到JSONP就等于用script加载代码。基于