一图秒懂CDN原理

线上故障：国外访问，页面中图片空白！！

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

先了说明下现状：

图片保存在阿里OSS中
国内使用了阿里云CDN
国外使用Akamai（全球CDN厂商）

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

CDN原理

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

如上图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列表可以看出

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

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

在一个窗口输入sudo tcpdump -n -s 1500 udp and port 53
在另一个窗口输入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这一项，导致页面中无法加载。

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

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

作者：逆水
链接：https://juejin.cn/post/6962904216503320589
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

原文链接：https://blog.csdn.net/u010365819/article/details/121604039?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918469516782391839845%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918469516782391839845&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-7-121604039-null-null.nonecase&utm_term=%E9%A6%99%E6%B8%AFcdn

原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/411