fonts头盔cps与字体发行

Question

我增加了头盔能力，设置CPS，但有一个问题的字体。一个简单的例子如下：

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

sample.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"));

Answer 1

这是CORS (交叉源资源共享)问题，我是从eot文件末尾的一个查询中获得的，例如，类似于字体-可怕的css，因为css使用了

src: url(...)

而不是

src: local(...)

如果它找不到查询字符串(例如?v=4.6.1 )，它就会进行查询来定位该字符串，从而引发CORS问题。

来自MDN的@ 一些信息 -face专门指出了这个问题：

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

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

所以要么使用本地关键字，然后错误查询就会悄然失败，要么您可以使用曼宁网站中的类似内容使用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头，我想？