Javascript 拒绝加载字体'；数据：font/woff…'；它违反了以下内容安全策略指令：；默认src'；自我'&引用；。请注意'；字体src'；

我的react webApp在浏览器控制台中出现此错误

Refused to load the font 'data:font/woff;base64,d09........' because it` 
`violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

另外：

Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

浏览器控制台的屏幕截图

index.html有这个meta:

Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

---

CSP可帮助您将您信任的源列入白名单。不允许所有其他来源访问。仔细阅读，如果您信任字体、套接字连接和其他来源，请确保将它们列入白名单

---

如果你知道你在做什么，你可以注释掉

meta

标签来测试，可能一切都正常。但是要意识到你/你的用户在这里受到了保护，所以保留

meta

标签可能是一件好事。

不管它值多少钱，我也遇到了类似的问题，假设它与Chrome更新有关

我必须添加字体src，然后指定url，因为我使用的是CDN

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com;">

我也有类似的问题。 我在angular.json中提到了一个错误的输出文件夹路径

"outputPath": "dist/",

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

---

对我来说，这是因为Chrome的“语法”扩展。禁用后，我没有收到错误。

要修复此特定错误，CSP应包括以下内容：

font-src 'self' data:;

因此，index.html元应为：

<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

---

从个人经验来看，最好的第一步是在匿名（Chrome）、私人浏览（Firefox）和InPrivate（IE11&&Edge）中运行站点，以消除附加组件/扩展的干扰。如果在其设置中显式启用这些设置，则它们仍会干扰此模式下的测试。但是，对问题进行故障排除是一个简单的第一步

我之所以来到这里，是因为信任网（WoT）将内容添加到我的页面，并且我的页面具有非常严格的内容安全策略：

Header set Content-Security-Policy "default-src 'none'; font-src 'self' data:; style-src 'self' 'unsafe-inline' data:; img-src 'self' data:; script-src 'self' 'unsafe-inline'; connect-src 'self';"

---

这导致了许多错误。我一直在寻找一个关于如何告诉扩展程序不要尝试在这个网站上以编程方式运行的答案。这样，当人们有扩展时，他们就不会在我的网站上运行。我想如果这是可能的话，广告拦截者早就在网站上被禁止了。所以我的研究有点幼稚。希望这能帮助其他试图诊断与其他答案中提到的少数扩展名无关的问题的人。

在我的例子中，我从create react app生成的应用程序中删除了src/RegisterService Worker文件。我添加了它，现在一切都正常了。

如果您的项目是vue cli，并且您运行的是

npm run build

，那么您应该进行更改

---

AssetPublicPath:'/'

到

AssetPublicPath'/'

您可能会在许多地方使用内联样式，而CSP（内容安全策略）禁止使用内联样式，因为这可能会造成危险

---

只需删除这些内联样式并将其放入专用样式表中。我今天在节点应用程序中也遇到了同样的错误

下面是我的节点API

app.get('azureTable', (req, res) => {
  const tableSvc = azure.createTableService(config.azureTableAccountName, config.azureTableAccountKey);
  const query = new azure.TableQuery().top(1).where('PartitionKey eq ?', config.azureTablePartitionKey);
  tableSvc.queryEntities(config.azureTableName, query, null, (error, result, response) => {
    if (error) { return; }
    res.send(result);
    console.log(result)
  });
});

---

修复非常简单，我在API之前缺少了一个斜杠“/”。因此，在将路径从“azureTable”更改为“/azureTable”后，问题得到了解决

我也遇到了同样的问题，通过在我的

node.js

应用程序中的目录名之前使用

/

解决了这个问题，即

---

app.use（express.static（'./public'））
我也面临着类似的问题

您需要删除默认情况下拾取的所有CSP参数，并理解为什么需要每个属性
字体src-是告诉浏览器从src加载字体的，在src之后指定。
font src:'self'-这告诉您在同一原点或系统内加载字体族。
font src:“self”数据：-这说明加载同一来源内的字体系列以及为获取数据而进行的调用：

您可能还会收到警告“**未能解码下载的字体，OTS解析错误：无效版本标记**”，请在CSP中添加以下条目

字体src:“self”字体

现在加载时应该没有错误。
我也遇到了同样的问题，结果是我试图提供服务的文件目录中出现了错误
而不是：


app.use（express.static（_dirname+'/../dist'）我今天在运行代码时也遇到了同样的问题。
我在这里找到了很多答案。但我想提到的重要一点是，这个错误消息非常模糊，没有明确指出确切的错误

有些是因为浏览器扩展，有些是因为不正确的URL模式，而我之所以会遇到这种情况，是因为我的formGroup实例在该屏幕的弹出窗口中出现了错误。
因此，我建议大家，在对代码进行任何新的更改之前，请调试代码并验证没有任何此类错误。
您一定会通过调试找到实际原因

如果没有其他办法，请检查您的URL，因为这是导致此问题的最常见原因。
您可能需要将其添加到
webpack.config.js
：

devServer: {

        historyApiFallback: true
    }
};

在我的laravel&VueJS项目中，我用webpack.mix.js文件解决了这个错误。它包含

const mix = require('laravel-mix');

mix.webpackConfig({
   devServer: {
     proxy: {
       '*': 'http://localhost:8000'
     }
   },
   resolve: {
     alias: {
       "@": path.resolve(
         __dirname,
         "resources/assets/js"
       )
     }
   }
 });

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

下面是我用来将server.js文件定向到angulardist文件夹的代码的一部分，该文件夹是在npm构建之后创建的

// Create link to Angular build directory
var distDir = __dirname + "/dist/";
app.use(express.static(distDir));

我通过换衣服把它修好了
“/dist/”
到
“/dist/”
对于我来说，这是因为brave browser中的ipfs扩展
浏览器扩展uBlock的设置将导致此错误。（注意：至少对我来说，语法不是问题。）

通常这不是问题。当远程字体被阻止时，您会退回到其他字体，并发出控制台警告“ERR_blocked_BY_CLIENT”。然而，当一个网站使用令人敬畏的字体时，这可能是一个严重的问题，因为图标显示为方框

网站对此无能为力（但你可以通过标记基于字体的图标等方式来防止它变得太糟糕）。改变th