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

其中，如果 URL 上未标明端口，那么 http 默认是 80 端口， https 默认是 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】实际开发场景为什么会出现跨域：

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

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

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

下面我们详细看看解决跨域的几个方案。

四 实现跨域的方式

返回目录

4.1 JSONP

返回目录

利用