font-src 配置了还是报 CSP 字体加载错误?

东方好妍 阅读 3

我在项目里加了 Content Security Policy,字体文件老是被拦,明明 font-src 已经配了 cdn.jsdelivr.net,但浏览器控制台还是报错说违反策略。

我用的是 Webpack 打包的 React 项目,字体是从 CDN 引入的。试过把 ‘self’、https: 都加上,甚至用了 * 通配符(虽然知道不安全),但还是不行。是不是哪里漏了?

const style = document.createElement('style');
style.textContent = <code>
  @font-face {
    font-family: &#039;CustomFont&#039;;
    src: url(&#039;https://cdn.jsdelivr.net/npm/@example/font.woff2&#039;) format(&#039;woff2&#039;);
  }
</code>;
document.head.appendChild(style);
我来解答 赞 0 收藏
二维码
手机扫码查看
1 条解答
IT人姿言
检查一下你的 CSP 头设置,确保没有拼写错误或者多余的空格。有时候这些小细节会搞人心态。还有,确认你的 CSP 是在服务器端设置的,而不是通过 meta 标签,因为 meta 标签可能会有兼容性问题。试试这个配置:

Content-Security-Policy: default-src 'self'; font-src 'self' https://cdn.jsdelivr.net;


然后重启下服务器,再看看控制台。拿去改改。
点赞
2026-03-20 14:47