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

一 目录

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

二 前言

返回目录

带着问题学习：

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

三 同源策略

返回目录

【1】什么是同源策略？

所谓 源，能够指 URL。

简略来看某个 URL 组成；

• https://github.com/LiangJunro…

在这里：

其中，如果 URL 上未标明端口，那么 http 默认是 80 端口，https 默认是 443 端口。

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

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

• https://github.com/LiangJunro…

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

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

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

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

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

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

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

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

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

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

1. 应用代理（proxy）
2. 设置 CORS
3. JSONP
4. ……等

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

四 实现跨域的形式

返回目录

4.1 JSONP

返回目录

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

优缺点：

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

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

4.2 CORS

返回目录

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）的信息。该域蕴含协定名、地址以及一个可选的端口。
• 简单申请 不止发送一个申请。其中最先发送的是一种“预申请”，而服务端也须要返回“预回应”作为相应。预申请实际上是对服务端的一种权限申请，只有当预申请胜利返回，理论申请才开始执行。

4.3 postMessage

返回目录

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

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

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

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

4.4 WebSocket

返回目录

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

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

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

4.5 Node

返回目录

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

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

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

4.6 Nginx

返回目录

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

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

4.7 其余形式

返回目录

其余形式还有：

1. window.name + iframe
2. location.hash + iframe
3. document.domain + iframe
4. ……

然而感觉有生之年 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】

jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。