前端培训中级阶段1112-跨域请求原理以及实现20190822期

jiezi

5 年前

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

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

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

iframe 跨域
比如 www.51vv.com 的一部分（header 吧），我 k.51vv.com 也想用。默认情况下不同源，是不允许的。那我们怎么办呢？
1. domain
2. postMessage
ajax 跨域
1. JSONP
2. CORS
3. 服务器代理
canvas 资源跨域
1. image 跨域
script 资源跨域
1. Script error.
  为了提升网站的访问速度，我们通常都会将静态资源文件 (css, image, javascript) 放在 CDN。当这些从 CDN 的 JavaScript 脚本执行出错，因为违背了同源策略, 为了保证用户信息不被泄露，错误信息不会显示出来，取而代之只会返回一个 Script error.。

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

优点
1. 浏览器兼容性强（全支持）
缺点
1. 不安全（嵌入异常逻辑代码）
2. 只能发 GET 请求

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

首先 script 标签 引入的代码，不管 跨不跨域都可以执行。常见的就是 CDN 的资源，我们拿来使用。
正常的 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}]})，这样不就等于拿到了数据？
服务端拼接 callback 名称，动态生成返回数据。

从上面的原理看到 JSONP 就等于用 script 加载代码。基于<script> 所以兼容性超级棒。同样因为基于 <script> 代码加载回来了就会执行，如果其中有恶意代码很危险。

CORS 是一个 W3C 标准，全称是 ”跨域资源共享 “（Cross-origin resource sharing）。
是用来处理跨域问题的一个标准方案。分为两种情况，简单请求 和非简单请求。

优点
1. 一个 标准化 的方案。
2. 对于 ajax 请求的方案。支持（get、post、put、delete）等多种请求方式。
3. 包含多种跨域情况，比如 script 跨域，image 跨域
4. 安全。因为他拿到的只是单纯的数据，数据具体怎么使用，还是由开发者来控制。
缺点
1. 兼容性较弱（IE 低版本的时候还没这个规范，所以不支持）
2. 非简单 请求首次会预检

只要同时满足以下两大条件，就属于简单请求。

请求方法是以下三种方法之一：HEAD、GET、POST
HTTP 的头信息不超出以下几种字段：
1. Accept
2. Accept-Language
3. Content-Language
4. Last-Event-ID
5. Content-Type：只限于三个值
  1. application/x-www-form-urlencoded、
  2. multipart/form-data
  3. text/plain

凡是不同时满足上面两个条件，就属于非简单请求。

浏览器对于这两种请求的处理流程是 不一样 的。

处理流程的区别？
- 简单请求：一次请求
- 非简单请求：两次请求，在发送数据之前会 先发一次预检（OPTIONS）请求，只有通过后才会正式的发送请求用于数据传输。
预检请求
- 请求方式（method）：OPTIONS
- 检查服务器是否支持对应的请求。
  - 通过则允许传输数据
  - 不通过则不再发送真正想要发送的消息（body）
- 如何预检
  - 如果复杂请求是 PUT 等请求，则服务端需要设置允许某请求，否则预检不通过
    Access-Control-Request-Method
  - 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则预检不通过
    Access-Control-Request-Headers

跨域的前提还记得吗？如果我们只请求当前域名不就没问题了吗？我问根据一定规则，让服务端帮我们请求。

优点
1. 兼容极好
2. 方便更换源
缺点
1. 流量问题
2. 需要主要安全问题，防止代理到内部服务器

    server {
        listen       80;
        server_name  proxy.lilnong.top;
        location = /50x.html {root   html;}
        location /proxy {proxy_pass http://8.8.8.8/;}
    }

意味着如果请求 https://proxy.lilnong.top/proxy/index.html 就会被代理到 http://8.8.8.8/index.html;
这里有个 注意点 ，proxy_pass http://8.8.8.8/; 和proxy_pass http://8.8.8.8;。前者会过滤掉 location 的匹配串，后者不会。

ajax 的跨域目前基本依靠 CORS 来解决。
nginx 用于内网也是不错的选择。
jsonp 在一些三方应用上表现还不错。

当然，不管哪种方案 都需要服务端的配置

前端培训 - 初级阶段（17）– 数据存储（cookie、session、stroage）
前端培训 - 初级阶段（13）– 正则表达式
前端培训 - 初级阶段（13）– 类、模块、继承
前端培训 - 初级阶段（13）– ECMAScript（内置对象、函数）
前端培训 - 初级阶段（13）– ECMAScript（语法、变量、值、类型、运算符、语句）
前端培训 - 初级阶段（13、18）
前端培训 - 初级阶段（9 -12）
前端培训 - 初级阶段（5 – 8）
前端培训 - 初级阶段（1 – 4）

前端培训 - 中级阶段（2）– 事件(event) 事件冒泡、捕获 –（2019-06-20 期）
前端培训 - 中级阶段（3）– DOM 文档对象模型（2019-06-27 期）
前端培训 - 中级阶段（4）- BOM 浏览器对象模型（2019-07-04 期）
前端培训 - 中级阶段（5）- jQuery 的概念与基本使用（2019-07-11 期）
前端培训 - 中级阶段（6）- jQuery 元素节点操作（2019-07-18 期）
前端培训 - 中级阶段（7）- jQuery 的事件绑定链式操作及原理（2019-07-25 期）
前端培训 - 中级阶段（8）- jQuery 元素属性样式操作（2019-08-01 期）
前端培训 - 中级阶段（9）- 原生 Ajax 的运行原理与实现（2019-08-08 期）
前端培训 - 中级阶段（10）- 同源策略（2019-08-15 期）

前端培训目录、前端培训规划、前端培训计划
浏览器同源策略及跨域的解决方法
Same-origin policy
Script error. 全面解析
之前虽然也知道这个错误。但是没有仔细看过。直到静态资源上 CDN，才发现了这个问题。
跨域资源共享 CORS 详解 – 阮一峰的网络日志
记得当初是一个上传功能，需要走统一上传服务器发现了 CORS 和 OPTIONS。就是在大佬这里看懂的。

前端培训中级阶段1112-跨域请求原理以及实现20190822期

跨域分类

ajax 跨域方案

JSONP 跨域方案

JSONP 优缺点

JSONP 原理

CORS 跨域方案

优缺点

简单请求与非简单请求的区分

OPTIONS

服务器代理跨域方案

优缺点

nginx 实现

总结

微信公众号：前端 linong

初级阶段文章目录

中级阶段文章目录

资料