JavaScript 跨域与 CORS 中怎么处理跨域字体文件加载失败问题-js教程-PHP中文网

答案：必须前端显式声明crossorigin: anonymous且服务端返回完整cors响应头。前端在@font-face中加crossorigin: anonymous触发cors请求，服务端需配置access-control-allow-origin、get方法及options预检支持，缺一则字体静默失败。

javascript 跨域与 cors 中怎么处理跨域字体文件加载失败问题

跨域字体文件加载失败，本质是浏览器对 @font-face 资源执行了更严格的 CORS 检查——它不像图片或脚本那样“宽松”，即使资源可访问，缺少正确响应头或前端声明，也会静默失败。解决关键在两端配合：前端显式启用 CORS 请求，服务端返回合规响应头。

前端必须加 `crossorigin="anonymous"`

这是最容易被忽略的第一步。仅在 @font-face 中写 URL 不够，必须声明跨域模式：

在 CSS 中使用 crossorigin: anonymous;（注意不是 HTML 属性，是 CSS 声明）：

@font-face {
  font-family: 'IconFont';
  src: url('https://cdn.example.com/fonts/icons.woff2') format('woff2');
  font-display: swap;
  crossorigin: anonymous;
}

如果字体通过 <link> 或动态 new FontFace() 加载，也要指定 crossOrigin: 'anonymous'；
不加该声明，浏览器会以“非 CORS 模式”发起请求，服务端即使返回了 Access-Control-Allow-Origin，也无效。

服务端需返回完整 CORS 响应头

字体文件服务器（CDN 或静态资源服务）必须在响应中包含以下头部，缺一不可：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

Access-Control-Allow-Origin：设为具体域名（如 https://your-site.com），生产环境禁用 *（除非不涉及凭证）；
Access-Control-Allow-Methods: GET；
Access-Control-Allow-Headers（可选但推荐，尤其当带自定义头时）；
对预检请求（OPTIONS）要单独处理并返回 204，否则首次加载会卡住。

Nginx 示例配置片段：

location ~* \.(woff2|woff|ttf|eot)$ {
  add_header Access-Control-Allow-Origin "https://your-site.com";
  add_header Access-Control-Allow-Methods "GET";
  if ($request_method = 'OPTIONS') {
    add_header Access-Control-Max-Age 1728000;
    add_header Content-Length 0;
    add_header Content-Type text/plain;
    return 204;
  }
}

验证是否生效的三个动作

别只看控制台有没有报错，要动手确认：

在 Network 面板中找到字体请求，点开查看 Response Headers，确认含 Access-Control-Allow-Origin；
右键复制字体 URL，在新标签页打开——若返回 403/404 是路径或权限问题；若能下载但页面仍不显示，就是 CORS 头缺失或不匹配；
检查字体文件 MIME 类型是否正确（如 font/woff2），Nginx 默认支持多数格式，但老旧版本可能需手动补 types { font/woff2 woff2; }。