title: Refused to load the font 'data:font/woff.....'it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src'
body: <p>My react webApp give this Error in Browser Console</p>
  
  <pre><code>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.
  </code></pre>
  
  <p><strong>Also:</strong></p>
  
  <pre><code>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.
  </code></pre>
  
  <p><strong>Screenshot of browser console</strong>
  <a href="https://i.stack.imgur.com/1aTvx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1aTvx.png" alt="enter image description here"></a></p>
  
  <p><strong>index.html</strong> Have this <strong>meta:</strong></p>
  
  <pre><code>&lt;meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://121.0.0:3000/"&gt;
  </code></pre>
  
  <p><strong>WebPack.cofig.js</strong></p>
  
  <pre><code>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,
      }
  };
  </code></pre>