深夜两点半

我盯着屏幕里破碎的网页布局

颤抖的手点开控制台

一行刺眼的红字正在嘲笑我：

"Font from origin 'https://cdn.mywebsite.com' has been blocked due to CORS policy"

别慌！今天我们就来扒一扒这个让无数前端工程师深夜掉发的经典陷阱——CDN字体跨域问题。（此刻应有BGM《二泉映月》）

---

一、当浏览器变成铁面门卫：同源策略现形记

想象你点了份小龙虾外卖

外卖小哥（你的网页）带着餐盒（字体文件）来到小区门口

突然被保安（浏览器）拦住："你工牌呢？"

这就是著名的同源策略(Same-origin policy)在作妖。当你的网页域名和字体资源域名不一致时（比如主站在`www.example.com`而字体托管在`cdn.example.com`），浏览器就会启动"快递验收模式"。

技术解剖时刻：

浏览器执行CORS检查时就像个强迫症患者：

1. 检查请求头`Origin`字段（相当于外卖订单地址）

2. 核对响应头`Access-Control-Allow-Origin`（相当于小区准入名单）

3. 发现名单不匹配立即触发警报

举个栗子🌰：

```http

错误示范

Request URL: https://cdn.example.com/fonts/awesome.woff2

Origin: https://www.example.com

Response Headers:

Access-Control-Allow-Origin: https://blog.example.com ❌

```

二、CDN配置七伤拳：那些年我们踩过的坑

去年双十一大促前夜

某电商团队紧急上线新UI

结果用户看到的都是□口口口口...

事后复盘发现是CDN配置漏了三个字母

2.1 经典翻车现场TOP3：

1. 缓存刺客：明明配好了CORS头，但CDN缓存了旧配置

2. 路径迷宫：/* 通配符没覆盖字体文件实际路径

3. 协议洁癖：忘记配置Vary: Origin导致HTTP/HTTPS混用翻车

专业防秃指南：

```nginx

Nginx正确姿势示例

location ~* \.(woff2?|ttf|eot)$ {

add_header Access-Control-Allow-Origin *;

add_header Vary Origin;

expires 365d;

}

三、破局四连鞭：从青铜到王者的解决方案

3.1 青铜方案 - 简单粗暴型

直接设置`Access-Control-Allow-Origin: *`

适合个人小项目开发环境

但要注意这相当于在小区门口挂个牌子："外卖随便进" —— 生产环境慎用！

3.2 白银方案 - CDN控制台流操作

以阿里云OSS为例：

1. 进入Bucket管理 → 权限管理 → HTTP头设置

2. CORS规则添加：

```json

{

"AllowedOrigin": ["https://www.example.com"],

"AllowedMethod": ["GET"],

"MaxAgeSeconds": 3600,

"ExposeHeader": ["Content-Length"]

}

```

3.3 黄金方案 - Serverless函数代理

当遇到第三方不可控CDN时：

```javascript

// AWS Lambda函数示例

exports.handler = async (event) => {

const font = await fetch('https://uncontrollable-cdn.com/font.woff2');

return {

statusCode:200,

headers:{

'Access-Control-Allow-Origin':'*',

'Content-Type':'font/woff2'

},

body: font.arrayBuffer()

};

};

3.4 王者方案 - HTTP/2 Server Push黑科技

利用现代协议特性提前推送资源：

```http2

Link: ; rel=preload; as=font; crossorigin=anonymous

配合Service Worker实现本地缓存管理双保险

四、终极核验六步法

部署完成后记得按这个checklist走一遍：

1. [ ] curl命令验证响应头是否携带CORS相关headers

```bash

curl -I https://cdn.example.com/font.woff2 | grep -i 'access-control'

2. [ ] Chrome开发者工具查看Network标签的Response Headers

3. [ ] Safari隐身模式测试（某些缓存问题的照妖镜）

4. [ ] WebPageTest多地域访问测试（排除CDN节点同步延迟）

5. [ ] Lighthouse跑分检查控制台警告

6. [ ] IE11临终关怀测试（懂的都懂）

/api/save发量接口调用成功/

上周公司新人小王按照本文方法排查问题时

意外发现了更骚的操作——

把字体转成Base64内联到CSS中！

不过友情提示📢：这相当于把小龙虾拆成虾仁带进小区

虽然躲过了门卫检查...

但会导致CSS文件膨胀（超过10KB的字体请慎重）

最后送大家一张护身符口诀表：

> CORS三要素记心间

> Origin头要配齐全

> CDN缓存定时检

> Vary字段不能欠

现在你可以挺直腰板说：

"不就是个字体跨域吗？洒洒水啦~"

TAG:cdn字体跨域,cdn切换,访问cdn上资源跨域,cdn选择,@font-face跨域