阅读 1285
一图秒懂CDN原理

一图秒懂CDN原理

线上故障:国外访问,页面中图片空白!!

前些天,线上灰度了一个功能,下午接到一些业务上报国外用户访问时图片无法显示,但是国内访问都是正常,所以怀疑是国外CDN问题导致。

先了说明下现状:

  1. 图片保存在阿里OSS中
  2. 国内使用了阿里云CDN
  3. 国外使用Akamai(全球CDN厂商)

按理说,CDN都有,图片不应该访问不到。于是,在脑子中根据CDN的原理,先思考下可能的问题

CDN原理

CDN全称是Content Delivery Network,即内容分发网络,也称为内容传送网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。

cdn.jpg

如上图CDN的逻辑主要分为两步:DNS解析请求边缘节点

用dig看下DNS解析结果:

$ dig juejin.cn

; <<>> DiG 9.10.6 <<>> juejin.cn
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 63296
;; flags: qr rd ra; QUERY: 1, ANSWER: 9, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 4096
;; QUESTION SECTION:
;juejin.cn.			IN	A

;; ANSWER SECTION:
juejin.cn.		412	IN	CNAME	juejin.cn.w.cdngslb.com.
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.229
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.227
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.231
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.224
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.225
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.230
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.226
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.228

;; Query time: 9 msec
;; SERVER: 192.168.3.1#53(192.168.3.1)
;; WHEN: Sat May 15 14:26:26 CST 2021
;; MSG SIZE  rcvd: 203
复制代码

在ANSWER SECTION列表可以看出

  1. juejin.cn为cname记录指向juejin.cn.w.cdngslb.com
  2. juejin.cn.w.cdngslb.com返回了7条A记录,这7个ip 信息是江苏 徐州 联通,我所在地是上海,联通,可以看出返回的都是就近节点。实际上CDN是有非常多的边缘节点。

用tcpdump来监控下DNS的UDP数据包

  1. 在一个窗口输入sudo tcpdump -n -s 1500 udp and port 53
  2. 在另一个窗口输入ping juejin.cn

监控到的UDP数据包如下:

21:49:13.960212 IP 192.168.3.201.52647 > 192.168.3.1.53: 37581+ A? juejin.cn. (27)
21:49:13.975290 IP 192.168.3.1.53 > 192.168.3.201.52647: 37581 9/0/0 CNAME juejin.cn.w.cdngslb.com., A 112.85.251.229, A 112.85.251.230, A 112.85.251.226, A 112.85.251.228, A 112.85.251.224, A 112.85.251.231, A 112.85.251.225, A 112.85.251.227 (192)
复制代码

其中,192.168.3.1为路由器IP。也就是本机向路由器询问DNS解析,如果路由器已经缓存了,就会直接返回。

复现问题

我们回到问题中,如果CDN返回的边缘节点如果不出问题,图片应该是可以很快访问到的,CDN厂商不至于出现这个问题。那么问题在那里呢?

在公司环境无法复现问题,就要找一个最接近客户场景的环境来测试,于是想办法搞到一台香港window系统的测试机,远程上去一看,还果真有问题。

图片在界面中不显示,但是直接在浏览器访问是正常的,开发者模式下发现访问图片时出现跨域错误

一张正常显示的图片请求返回的http头是这样的:

Response Headers:
    accept-ranges: bytes
    access-control-allow-origin: *
    etag: "A31F477F3232DA431D3B77543C3EBF92"
    last-modified: Thu, 25 Jul 2019 01:37:03 GMT
    ...省略
复制代码

1. access-control-allow-origin

通配符 * 表示允许被任何网站引用。如果想让资源只被指定域名访问,只需把*改为域名就行了,如下:

access-control-allow-origin: `https://juejin.cn`
复制代码

2. etag

etag是http协议缓存逻辑中的一个属性。CDN的目的就是减少网络访问,因为缓存是必须要用的功能。

而无法显示的图片,返回的请求头是这样的:

Response Headers:
    accept-ranges: bytes
    etag: "A31F477F3232DA431D3B77543C3EBF92"
    last-modified: Thu, 25 Jul 2019 01:37:03 GMT
    ...省略
复制代码

没有access-control-allow-origin这一项,导致页面中无法加载。

sequenceDiagram
浏览器->>边缘节点: 请求图片
边缘节点-->>浏览器: 命中缓存,返回图片
浏览器-)浏览器: 响应头中没有CORS属性
浏览器-)浏览器: 抛出CORS异常,图片不渲染

解决办法很简单,在CDN后台配置返回access-control-allow-origin信息即可

文章分类
后端
文章标签