生产环境使用ag-grid遇字体加载错误致CSS失效求助

问题成因 #

• 生产环境启用了严格的Content Security Policy（CSP），仅允许default-src 'self'，但未显式配置font-src规则，因此font-src会继承default-src的限制。
• AG Grid默认会通过data:协议加载内嵌的Base64编码字体（用于表格图标、图表等元素），这类资源不在'self'的允许范围内，所以被浏览器拦截。
• 本地环境通常未启用严格CSP，或CSP规则宽松，因此不会触发该报错。

解决办法 #

方法1：调整CSP规则，允许加载data:协议的字体 #

显式在CSP中添加font-src规则，允许'self'和data:协议的字体资源：

• 如果是通过HTML meta标签配置CSP：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data:;">

• 如果是通过服务器配置（如Nginx、Apache）或CDN安全策略，添加对应的font-src 'self' data:规则即可。

方法2：禁用AG Grid内嵌资源，使用外部字体文件 #

通过AG Grid的配置禁用内嵌字体，改用项目内托管的外部字体文件：

1. 在GridOptions中添加配置：

const gridOptions = {
  // 禁用AG Grid的内嵌资源（包括字体）
  disableEmbeddedResources: true
};

2. 从AG Grid的依赖包中复制字体文件（通常位于node_modules/ag-grid-community/dist/styles/fonts目录）到项目的静态资源目录（如public/fonts）。
3. 在项目的全局CSS中引入这些字体：

@font-face {
  font-family: "agGridIcons";
  src: url("./fonts/agGridIcons.woff2") format("woff2"),
       url("./fonts/agGridIcons.woff") format("woff");
}

内容的提问来源于stack exchange，提问作者Mohit Panwar