内容安全政策：该页面的设置阻止以内联方式“ default-src”加载资源

问题描述

我知道有很多类似的问题。但是，我仍然对MERN还是陌生的，我正在寻找对此问题的简化答案。

我正在遵循 MERN 堆栈上的教程，该应用程序是一个简单的费用计算器，所有功能都非常有效，直到我们继续添加Express和Mongoose为止。这是server.js文件，因此您可以看到我的烂摊子：

const path = require('path');
const express = require('express');
const dotenv = require('dotenv');
const colors = require('colors');
const morgan = require('morgan');
const transactions = require('./routes/transactions');
const connectDB = require('./config/db');

dotenv.config({ path: './config/config.env' });

connectDB();

const app = express();

app.use(express.json());


if(process.env.NODE_ENV === 'development') {
    app.use(morgan('dev'));
}

app.use('api/v1/transactions',transactions);

if(process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'));

    app.get('*',(req,res) => res.sendFile(path.resolve(__dirname,'client','build','index.html')));
}

const PORT = process.env.PORT || 5000;

app.listen(PORT,console.log(`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`));

我将所有内容正确地导入package.json中，因此可能不需要向其发送垃圾邮件。我已连接到Mongodb，尽管我确定这不会有所作为。无论如何，当我使用命令启动它（npm run start）时，服务器在localhost：5000上启动，并且我在html页面上立即看到 Cannot GET / 。在Firefox的控制台中，出现错误：

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). injectGlobalHook.js:513:49

在Chrome上显示：

... it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set,so 'default-src' is used as a fallback.

也在我的终端中显示 GET / 404 2.201 ms-139 ，但仅在刷新页面时显示。因此，我知道该错误与CSP有关，并且该错误存在于文件中，我不应该也不应该触摸，但我不知道如何解决。我以前有过错误，但是我想我只是放弃了那个项目。答案会很不错，但是对我为什么会收到此错误的解释会更好。谢谢！

解决方法

可以在index.html（前端）或Web服务器（后端）中定义CSP。

在前端的情况下，您应该会找到类似的内容：

<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=11"/>
        <meta http-equiv="Cache-Control" content="no-cache"/>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self';"/>
        <title>
        </title>
    </head>

根据您的错误消息，您需要替换

default-src 'none'

作者

default-src 'self'

对于后端，显然您的NodeJS代码中没有CSP参考。

content-security-policy express mongodb mongoose