expressjs头盔cps问题与字体

我已经添加了头盔功能来设置CPS，但是存在字体问题。一个简单的例子如下：expressjs头盔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"));

来源

2016-04-11 Tyler Evans

在这种情况下'__dirname'是什么？ – JoeKir

它是一个CORS（跨源资源共享）问题，这个例子来自对eot文件末尾的查询，例如，像字体真棒的css因为CSS是使用

src: url(...)

代替

src: local(...)

如果它未能找到查询字符串，例如？v = 4.6.1，它做了什么，它将会进行查询来查找CORS问题。

Some info从MDN @字体面特别提出这个问题：

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

MDN CORS info从该文档链接。

因此，无论使用本地的关键字和错误查询失败默默，或者您也可以用快递使用的东西从Manning website开拓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-19 05:27:30 JoeKir

expressjs头盔cps问题与字体

回答

相关问题