font-src 配置了还是报 CSP 字体加载错误?
我在项目里加了 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: 'CustomFont';
src: url('https://cdn.jsdelivr.net/npm/@example/font.woff2') format('woff2');
}
</code>;
document.head.appendChild(style);
font-src确实包含了https://cdn.jsdelivr.net。有时候 CSP 可能被覆盖或者拼写错误,要仔细检查一下。其次,你的
@font-face写法没问题,但要注意如果 CSP 中还有其他限制,比如base-uri或者default-src,这些也可能影响到字体的加载。你可以尝试在 CSP 中单独列出所有可能的资源源,确保没有遗漏。最后,确保你的服务器正确设置了 CSP 头。如果你是在开发环境中测试,可以暂时用
console.log或者浏览器的开发者工具查看当前生效的 CSP 策略,确认是否是你预期的那个。举个例子,如果你在 HTTP 响应头中设置 CSP,应该是这样的:
如果是通过 HTML 标签设置,应该是:
注意引号的使用,有时候单双引号不对也会导致问题。
如果以上都确认无误,可以尝试清除浏览器缓存,有时候旧的 CSP 设置会被缓存住。
希望这些建议能帮到你,如果还有问题再找我哈。
然后重启下服务器,再看看控制台。拿去改改。