`[WDS]断开连接`ReactJS，webpack

Question

I am getting this error after run yarn start . 运行yarn start后出现此错误。 I am trying to develop a hello-word ReactJS app with webpack and Babel 我正在尝试使用webpack和Babel开发一个问候词ReactJS应用程序

[WDS] Disconnected! Content Security Policy: The page's settings blocked the loading of a resource at http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css (“style-src”). Content Security Policy: The page's settings blocked the loading of a resource at blob:http://localhost:3000/edcc77c5-a0d7-4b24-9f6d-5e740ffd77df (“style-src”).

This is my webpack.config.js file 这是我的webpack.config.js文件

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const port = process.env.PORT || 3000;
module.exports = {
    mode: 'development',  
    entry: './src/index.js',
    output: {
        filename: 'bundle.[hash].js'
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                          modules: true,
                          camelCase: true,
                          sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            favicon: 'public/favicon.ico'
        })
    ],
    devServer: {
        host: 'localhost',
        port: port,
        historyApiFallback: true,
        open: true
    }
};

This is my package.jon file 这是我的package.jon文件

{
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-prop-types": "^0.4.0",
    "react-router-dom": "^4.2.2",
    "semantic-ui-react": "^0.79.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.1.0",
    "style-loader": "^0.20.3",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  }
}

public/index.html 公共/ index.html的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
  <title>webpack-for-react</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

I try to slove this error. 我尝试解决这个错误。 But I couldn't do it. 但是我做不到。 If somebody has a clue please help me. 如果有人有线索，请帮助我。 I think this error comes from webpack.config.js file. 我认为此错误来自webpack.config.js文件。

Answer 1

The problem is the Content-Security-Policy you use. 问题是您使用的Content-Security-Policy 。

Right now you are allowing only local css files and inline styles. 目前，您只允许使用本地CSS文件和内联样式。

When you try to import semantic.min.css cloudflare is not an allowed host. 当您尝试导入semantic.min.css cloudflare是不允许的主机。

So you probably need to add 所以您可能需要添加

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline' http://cdnjs.cloudflare.com; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

I suggest you to read CSP documentation to find out more. 我建议您阅读CSP文档以了解更多信息。

And also try to use Content-Security-Policy-Report-Only while in development so you only get the reports of the violations. 并且还尝试在开发过程中Content-Security-Policy-Report-Only使用Content-Security-Policy-Report-Only ，这样您就只能获取违规的报告。

`[WDS]断开连接`ReactJS，webpack

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-03-27 06:03:34

`[WDS]断开连接`ReactJS，webpack

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-03-27 06:03:34

解决方案1
2 已采纳 2018-03-27 06:03:34