Reactで任意のIPから起動すると、エラーが表示される

Question

どうしても解決しなかったので質問します。

このページを参考にReactを勉強していたところ、このページだとReact-routerを起動の際、IPアドレスをlocalhostにしているのですが、自分の環境だとlocalhostにできないので、VirtualBox内の仮想環境（centOS7)で起動しようとして、困った問題に直面しました。

起きていること

任意のIPアドレスで起動しようとして、この個人サイトなどを参考に、webpack.config.jsに以下の設定を加えてみました。

var debug   = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path    = require('path');
var fallback = require('express-history-api-fallback');
module.exports = {
  context: path.join(__dirname, "src"),
  entry: "./js/client.js",
  module: {
    rules: [{
      test: /.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }]
      }]
    },
		devServer: {
			disableHostCheck: true, 
			host: '0.0.0.0', //任意のIPで起動する
			historyApiFallback: true, 
			hot: true,
			contentBase: './dist',
			watchOptions:{
				ignored: /node_modules/
			}
		},
		output: {
      path: __dirname + "/src/",
      filename: "client.min.js"
    },
    plugins: debug ? [] : [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ]
};

この状態で

#npm start

を実行すると、サーバはうまく起動されます。しかし、肝心のブラウザにアクセスしてみると

Cannot GET /react-tutorial/src/index.html

というメッセージがブラウザに表示されるだけになり、メッセージ通り、GETのパラメータも404となっています。また、コンソールには

Refused to load the image 'http://192.168.11.xx:8080/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

と表示されているのですが、関係があるのかはよくわかりません。

#やってみたこと(いずれも解決に至らず)

• <base href="/"/>をheadタグに入れてみた。

参考:react-routerでURLパラメータを指定した際、URL直打ちだと404になります

• devServerの設定にhistoryApiFallback: trueを設定してみた。

また、コンソールのエラーメッセージ対策として

<meta http-equiv="Content-Security-Policy" content="default-src 'none' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;**script-src 'self' http://onlineerp.solution.quebec 'unsafe-inline' 'unsafe-eval';** ">

を追加してみたりしましたが、全く成果がありません。ほかにも国内、海外のサイトを色々と巡回してみたのですが、ギブアップに近い状態です。

解決法をご存知の方、ご教授いただけると大変助かります。

Answer 1

自己解決です。

原因は

192.168.11.xx:8080/react-tutorial/src/index.html

としていたことで、ファイルのパスを書いてしまったことで、セキュリティ的なエラーが生じていたようです。なので

192.168.11.xx:8080

と、ルートだけ指定したら起動し、リアクティブになりました。

また、webpack.config.jsに記述する追記は内部サーバからなら

devServer:{
    host: 0.0.0.0
}

だけで問題ないようですね。また、起動のコマンドも

npm start

だけで大丈夫なようです。