我的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.

Also:

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.

Screenshot of browser console

index.html有这个meta:

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

WebPack.cofig.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: path.join(__dirname, "./src"),
    devtool: debug ? "inline-sourcemap" : true,
    entry: "../src/index.js",

    module: {
        rules: [
            {
                test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/i,  // a regular expression that catches .js files
                exclude: /node_modules/,
                loader: 'url-loader',
            },
            {
                test: /\.(js|.jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react','es2016', 'stage-0',],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
                }
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                    }
                ]
            }
        ]
    },
    resolve: {
        modules: [
            path.join(__dirname, "src"),
            "node_modules",
        ]
    },
    output: {
        path: __dirname + "/public/",
        // publicPath: "/public/",
        filename: "build.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
    devServer: {
        port: 3000, // most common port
        contentBase: './public',
        inline: true,
        historyApiFallback: true,
    }
};

推荐答案

对我来说,这是因为Chrome的"语法"扩展.禁用后,我没有得到错误.

Reactjs相关问答推荐

ReferenceError:未在Redux组件中定义窗口

使用Thattle和Use Effect setTimeout进行搜索有什么不同

Redux Provider Stuck甚至彻底遵循了文档

不同步渲染

如何使用.Aggregate从多个集合中获取数据,包括使用Mongoose+NextJS的SUM值

我在Route组件上使用元素属性,这样就不需要ID了吗?

我发送的 prop 的值不会改变.如果成功登录,导航栏中的 prop 必须为 true.我从后端得到 200 ok

Mui DataGrid 在第二页和前一页上显示项目时出现问题

React Native - 如何处理错误带有有效负载的NAVIGATE操作..未被任何导航器处理?

如何管理可重用无线电输入的 React 状态?

解决在React测试库中的act()警告

如何在Next.js应用程序中为路由[slug]生成.html文件?

未处理的拒绝 (TypeError):无法读取未定义的属性(读取协议)

为什么 createSlice 中的 reducer 不能以不同的方式改变状态?

当每个元素都可拖动时,移动设备上的滚动列表出现问题

React - 使用 React 显示错误和积极alert

为什么 setState 在 React 中不是异步的?

React + i18next + Trans + Prettier:Prettier 最终会在重新格式化 JSX 时 destruct 翻译

不能在我的代码中使用 .给我一个警告!有人知道解决方案吗?

如何使用 useEffect 和 if 语句 React