web-dev-qa-db-ja.com

Webpack開発サーバーReactコンテンツセキュリティポリシーエラー

シングルページアプリをwebpack-dev-serverで実行しています。 localhost:8080でエントリルートをロードおよびリロードでき、毎回機能します。ただし、アプリ内からのリンクを介してのみlocalhost:8080/accounts/loginを読み込むことができます。つまり、ブラウザの更新ボタンからlocalhost:8080/accounts/loginを再読み込みするたびに

Cannot GET /accounts/login/

サーバーの応答として、そしてコンソールで私は得る

コンテンツセキュリティポリシー：ページの設定により、リソースの読み込みが自動的にブロックされました（「default-src http：// localhost：808 」）。ソース：;（function installGlobalHook（window）{..。

これは、シングルページアプリのindex.htmlにある私のCSPヘッダーです。

<meta http-equiv="Content-Security-Policy"
  content="default-src * 'self' 'unsafe-inline' 'unsafe-eval'">

また、webpack.config.jsonでdevtoolを使用していません。私は何が欠けています。

reactjswebpackwebpack-dev-servercontent-security-policy
8
dave-oo

プロジェクトでWebpackを使用している場合は、webpack構成ファイルにoutput.publicPath = '/'とdevServer.historyApiFallback = trueを追加してください。

詳細： React-ルーターのURLは、手動で更新または書き込みを行うと機能しません

13
RalfZ

私はこの問題を解決するのに数時間苦労しました。追加する必要がある単純なコードがあります。以下の指示に従ってください。特定のURLから別のURLに参照する際に問題が発生した場合は、それも修正できます。 webpack設定ファイルから設定したい場合は、以下のコードを記述してください。

devServer: {
    historyApiFallback: true
}

また、cliコマンドで実行する場合は、以下のコードを使用してください。

"start": "webpack-dev-server --history-api-fallback"

それは私のために働いた。メタタグなど、この問題を修正するために他に何もする必要はありませんでした。

0
Saroar Hossain Shahan