My react webApp give this Error in Browser Console
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 Have this 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,
}
};
See Question&Answers more detail:
os