Content Security Policy error using webpack-dev-server

I’m using:

"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"

My webpack.config.js:

var path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/assets/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9002
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' }
    ]
  }
};

My src/index.js contains

import ReactDOM from 'react-dom';
import React from 'react';

ReactDOM.render(
    <h1>Curve!</h1>,
    document.getElementById('root')
);

When I start webpack-dev-server and go to localhost:9002 I get the following error:
Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src http://localhost:9002”). Source: ;(function installGlobalHook(window) {

Why is that so?

Author: Fantashit

2 thoughts on “Content Security Policy error using webpack-dev-server

  1. Note for future travellers, try configuring historyApiFallback: {disableDotRule: true} in your devServer config.

  2. If you guys still face any problem of content security policy, no worries. Just click here to check my answer at StackOverflow. You don’t have to use any meta tag. You will be able to fix it by webpack or cli command.

Comments are closed.