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問題與字體

回答

相關問題