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

转载自 SegmentFault

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

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

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

跨域分类

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

domain

• postMessage

ajax 跨域

JSONP

• CORS

• 服务器代理

canvas 资源跨域

image 跨域

script 资源跨域

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

ajax 跨域方案

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

JSONP 跨域方案

JSONP 优缺点

优点

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

缺点

不安全（嵌入异常逻辑代码）

• 只能发GET请求

JSONP 原理

下面我们来说一下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 跨域方案

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

优缺点

优点

一个标准化的方案。

• 对于 ajax 请求的方案。支持（get、post、put、delete）等多种请求方式。

• 包含多种跨域情况，比如script跨域，image跨域

• 安全。因为他拿到的只是单纯的数据，数据具体怎么使用，还是由开发者来控制。

缺点

兼容性较弱（IE 低版本的时候还没这个规范，所以不支持）

非简单请求首次会预检

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

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

• 请求方法是以下三种方法之一：HEAD、GET、POST

HTTP的头信息不超出以下几种字段：

Accept

• Accept-Language

• Content-Language

• Last-Event-ID

Content-Type：只限于三个值

application/x-www-form-urlencoded、

• multipart/form-data

• text/plain

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

OPTIONS

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

处理流程的区别？

简单请求：一次请求

• 非简单请求：两次请求，在发送数据之前会先发一次预检（OPTIONS）请求，只有通过后才会正式的发送请求用于数据传输。

预检请求

请求方式（method）：OPTIONS

检查服务器是否支持对应的请求。

通过则允许传输数据

• 不通过则不再发送真正想要发送的消息（body）

如何预检

如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则预检不通过 Access-Control-Request-Method

• 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则预检不通过 Access-Control-Request-Headers

服务器代理 跨域方案

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

优缺点

优点

兼容极好

• 方便更换源

缺点

流量问题

• 需要主要安全问题，防止代理到内部服务器

nginx实现

    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在一些三方应用上表现还不错。

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

微信公众号：前端linong

初级阶段文章目录

• 前端培训-初级阶段（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。就是在大佬这里看懂的。

原文：SegmentFault