关于前端:jsliang-求职系列-17-跨域

不折腾的前端，和咸鱼有什么区别

目录
一目录
二前言
三同源策略
四实现跨域的形式
4.1 JSONP
4.2 CORS
4.3 postMessage
4.4 WebSocket
4.5 Node
4.6 Nginx
4.7 其余形式
五参考文献

带着问题学习：

什么是跨域？
为什么要设置跨域？
如何解决跨域？

【1】什么是同源策略？

所谓源，能够指 URL。

简略来看某个 URL 组成；

https://github.com/LiangJunro…

在这里：

名称	举例
协定	`http`、`https`
域名	`github.com`、`jsliang.top`
端口	`80`、`443`

而所谓的同源策略，是指这 3 个（协定、域名、端口）统一的状况下，才属于同源。

对于上面的 URL，咱们判断下哪些属于同源哪些属于不同源：

https://github.com/LiangJunro…

URL	是否同源	起因
http://github.com	否	协定不同
https://github2.com	否	域名不同
https://github.com:80/LiangJunrong	否	`https` 默认端口为 `443`
https://money.github.com	是	多级域名和主域名统一

在下面，如果两个页面对应的地址不同源，那么浏览器就会断定跨域，从而导致上面问题：

Ajax 申请不能发送
无奈获取 DOM 元素并进行操作
无奈读取 Cookie、LocalStorage 和 IndexDB

那么，出于怎么的思考，【2】浏览器才要设置跨域？

首先，跨域只存在于浏览器端，因为咱们晓得浏览器的状态是很凋谢的，所以咱们须要对它有所限度。

其次，同源策略次要是为了保障用户信息的平安，可分为两种：Ajax 同源策略和 DOM 同源策略。

Ajax 同源策略次要是使得不同源的页面不能获取 Cookie 且不能发动 Ajax 申请，这样在肯定层度上避免了 CSRF 攻打。

DOM 同源策略也一样，它限度了不同源页面不能获取 DOM，这样能够避免一些歹意网站在本人的网站中利用 iframe 嵌入正规的网站并蛊惑用户，以此来达到窃取用户信息。

【3】理论开发场景为什么会呈现跨域：

前后端部署的机子，不属于同一台云服务器。
同一台云服务器，然而你在 https://github.com 申请的是 https://github2.com 上的资源。

那么，【4】如何解决跨域问题 呢？

应用代理（proxy）
设置 CORS
JSONP
……等

上面咱们具体看看解决跨域的几个计划。

利用 <script> 标签没有跨域限度的破绽，网页能够失去从其余起源动静产生的 JSON 数据。JSONP 申请肯定须要对方的服务器做反对才能够。

优缺点：

【长处】Ajax 和 JSONP 都是客户端向服务端发送申请，从而获取数据的形式。然而 Ajax 属于同源策略，而 JSONP 属于非同源策略。
【长处】兼容性好，能解决支流浏览器跨域拜访的问题。
【毛病】仅反对 get 申请
【毛病】不平安，可能会蒙受 XSS 攻打。

实现过程：省略，看 JS 手写代码局部。

CORS 跨域的原理。

跨域资源共享（CORS）是一种机制，是 W3C 规范。它容许浏览器向跨源服务器，收回 XMLHttpRequest 或 Fetch 申请。并且整个 CORS 通信过程都是浏览器主动实现的，不须要用户参加。

而应用这种跨域资源共享的前提是，浏览器必须反对这个性能，并且服务器端也必须批准这种 “ 跨域 ” 申请。因而实现 CORS 的要害是服务器须要服务器。

浏览器会主动进行 CORS 通信，实现 CORS 通信的要害是后端。只有后端实现了 CORS，就实现了跨域。

服务端设置 Access-Control-Allow-Origin 就能够开启 CORS。

该属性示意哪些域名能够拜访资源，如果设置通配符则示意所有网站都能够拜访资源。

CORS 的申请分为两种：

简略申请
简单申请

一个简略申请大抵如下。

HTTP 办法是下列之一：

HEAD
GET
POST

HTTP 头信息不超过以下几种字段

Accept
Accept-Language
Content-Language
Last-Event-ID
……等（记不住。。。）

任何不满足上述要求的申请，都是简单申请。

一个简单申请不仅蕴含通信内容的申请，同时也蕴含预申请。

简略申请和简单申请的区别：

简略申请 的发送从代码上看起来和一般的 XHR 没太大区别，然而 HTTP 头当中要求总是蕴含一个域（Origin）的信息。该域蕴含协定名、地址以及一个可选的端口。
简单申请 不止发送一个申请。其中最先发送的是一种“预申请”，而服务端也须要返回“预回应”作为相应。预申请实际上是对服务端的一种权限申请，只有当预申请胜利返回，理论申请才开始执行。

postMessage 是 HTML5 XMLHttpRequest Level 2 中的 API，且是为数不多能够跨域操作的 window 属性之一。

它可用于解决以下方面的问题：

页面和其关上的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的 iframe 消息传递
下面三个场景的跨域数据传递

postMessage() 办法容许来自不同源的脚本采纳异步形式进行无限的通信，能够实现跨文本档、多窗口、跨域消息传递。

WebSocket 是 HTML5 的一个长久化的协定，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。

WebSocket 是一种双向通信协定，在建设连贯之后，WebSocket 的 server 与 client 都能被动向对方发送或接收数据。

WebSocket 的应用咱们在计算机网络局部有写，前面再进行介绍。

同源策略是浏览器须要遵循的规范，而如果是服务器向服务器申请就无需遵循同源策略。

所以咱们能够通过 Node 中间件代码（两次跨域）：

承受客户端申请
将申请转发给服务器
拿到服务器响应数据
将响应转发给客户端

应用 Nginx 反向代理实现跨域，是最简略的跨域形式。

只须要批改 Nginx 的配置即可解决跨域问题，反对所有浏览器，反对 Session，不须要批改任何代码，并且不会影响服务器性能。

其余形式还有：

window.name + iframe
location.hash + iframe
document.domain + iframe
……

然而感觉有生之年 jsliang 不会用到，这里看看即可。

[x] 浏览器同源策略与 ajax 跨域办法汇总【浏览倡议：15min】
[x] 九种跨域形式实现原理（完整版）【浏览倡议：15min】
[x] 前端开发如何独立解决跨域问题【浏览倡议：5min】
[x] CORS 原理及实现【浏览倡议：30min】
[x] JSONP 原理及实现【浏览倡议：30min】
[x] 面试题：nginx 有配置过吗? 反向代理晓得吗?【浏览倡议：10min】
[x] 10 种跨域解决方案（附终极大招）【浏览倡议：1h】
[x] [CORS 跨域申请[简略申请与简单申请]](https://www.cnblogs.com/qunxi…【浏览倡议：20min】

一 目录

二 前言

三 同源策略

四 实现跨域的形式

4.1 JSONP

4.2 CORS

4.3 postMessage

4.4 WebSocket

4.5 Node

4.6 Nginx

4.7 其余形式

五 参考文献

一目录

二前言

三同源策略

四实现跨域的形式

五参考文献