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 组成;

在这里:

名称 举例
协议 httphttps
域名 github.comjsliang.top
端口 80443
其中,如果 URL 上未标明端口,那么 http 默认是 80 端口, https 默认是 443 端口。

而所谓的同源策略,是指这 3 个(协议、域名、端口)一致的情况下,才属于同源。

对于下面的 URL,我们判断下哪些属于同源哪些属于不同源:

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

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

  • Ajax 请求不能发送
  • 无法获取 DOM 元素并进行操作
  • 无法读取 CookieLocalStorageIndexDB

那么,出于怎样的考虑,【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

返回目录

利用