1

我添加了头盔功能来设置 CPS，但是字体存在问题。一个简单的例子如下：

但是，它会正确加载所有资产，但它抱怨的字体除外。

示例.css

src: url("/assets/fonts/font.eot")

Example.com

app.use(csp({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "'unsafe-inline'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'"],
        fontSrc: ["'self'", "'unsafe-inline'"],
        sandbox: ['allow-forms', 'allow-scripts'],
        reportUri: '/report-violation',
        objectSrc: [],
    },
    reportOnly: false,
    setAllHeaders: false,
    disableAndroid: false,
    browserSniff: true
}));

在浏览器中它给了我这个字体的错误信息

Font from origin 'http://localhost:3000' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

我是否缺少使字体在浏览器中工作的东西？

在快递中，我确保正确设置公共和资产文件。（资产中的一切工作正常）。

app.use("/assets", express.static(__dirname + "/assets"));
app.use("/public", express.static(__dirname + "/public"));
4

1 回答 1

1

它是一个 CORS（跨源资源共享）问题，我的示例来自对 eot 文件末尾的查询，例如在 font-awesome 的css中，因为 css 使用的是

src: url(...)

代替

src: local(...)

如果它未能找到它找到的查询字符串，例如 ?v=4.6.1，它将进行查询以找到它，从而涉及 CORS 问题。

来自 MDN 的一些关于 @font-face 的信息特别指出了这个问题：

Web 字体受到相同的域限制（字体文件必须与使用它们的页面位于同一域中），除非使用 HTTP 访问控制来放宽此限制。

从该文档链接的MDN CORS 信息。

因此，要么使用 local 关键字，错误查询就会静默失败，或者您可以使用Manning 网站上的类似内容使用 express 打开 CORS ：

app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });

但是当您使用 CSP 时，您会想深入研究如何进一步锁定 CORS 标头，我想？

于 2016-04-19T05:27:30.287 回答