前端静态资源 CDN 部署后跨域或字体加载失败怎么解决？

Question

仓乃文 · Accepted Answer

静态资源上 CDN 后，字体文件加载失败、图片跨域报错是常见问题。根本原因是 CDN 域名和页面域名不同，需要正确配置 CORS。

常见错误：
```
Access to font at "https://cdn.example.com/fonts/icon.woff2" from origin
"https://www.example.com" has been blocked by CORS policy
```

解决方案：
```nginx
# CDN 服务器 Nginx 配置
location ~* \.(woff2?|ttf|otf|eot)$ {
  add_header Access-Control-Allow-Origin "https://www.example.com";
  # 或允许所有域名
  add_header Access-Control-Allow-Origin "*";
  add_header Access-Control-Allow-Methods "GET";
}

# 图片跨域
location ~* \.(png|jpg|gif|svg|webp)$ {
  add_header Access-Control-Allow-Origin "*";
}
```

CSS 中的字体引用：
```css
/* 确保字体 URL 指向 CDN */
@font-face {
  font-family: "IconFont";
  src: url("https://cdn.example.com/fonts/icon.woff2") format("woff2");
}
```

补充说明：
- 字体文件必须配 CORS，浏览器会检查
- 图片跨域只在 Canvas 绘制时需要
- CDN 配置 Access-Control-Allow-Origin
- 规则：CDN 部署后必须测试字体和图片加载