web-dev-qa-db-ja.com

資格情報を含むWebpack-dev-server CORSエラー

ホットモジュールのリロード-開発サーバーでCORSの問題が発生します。ポート3000でdev-serverを使用していますが、アプリケーションは別のポートhttp://localhost:52024/から提供されています。

これは私が得ているエラーです（Chrome、Windows 10）：

GET http://localhost:3000//sockjs-node/info?t=1502216500095 404 (Not Found)
XMLHttpRequest cannot load http://localhost:3000//sockjs-node/info?t=1502216500095. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:52024' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
[WDS] Disconnected!

実際には2つのエラーが発生しています。最初のエラーはパスの二重スラッシュ//が原因で発生し、もう1つはCORS関連のエラーです。これは私のwebpack.config.jsです。

const webpack = require('webpack'),
    path = require('path');

module.exports = {
    entry: {
        'admin': ['webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './src/admin/index.js']
    },
    output: {
        path: path.join(__dirname, 'admin/dist'),
        filename: '[name].js',
        publicPath: 'http://localhost:3000'
    },
    module: {
        rules: [
            { test: /\.js$/, include: path.join(__dirname, 'src'), use: ['react-hot-loader/webpack', 'babel-loader'] },
            { test: /\.css/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ['url-loader?limit=10000&mimetype=application/font-woff'] },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ['file-loader'] },
            { test: /\.(png|jpg)$/, use: ['url-loader?limit=8192'] }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        port: 3000,
        hot: true,
        inline: true,
        headers: {
            "Access-Control-Allow-Origin": "*"
        }
    }
};

私はwebpackを次のように始めています：

webpack-dev-server --config webpack.config.js --progress

何か案が？ webpack 3.5.1とwebpack-dev-server 2.7.1を使用していますありがとうございます。

javascriptwebpackcorswebpack-dev-serverhot-module-replacement
8
aghidini

CORSの問題を修正する限り、次のいずれかを実行できます。

  • webpack.config.jsハードコードhttp://localhost:52024で、許可されたオリジンとしてAccess-Control-Allow-Origin応答ヘッダーの値に次のように入力します。

    headers: {
    "Access-Control-Allow-Origin": "http://localhost:52024"
}

    そしてもちろん、アプリケーション用に本番サーバー/ドメインを設定したら、そのhttp://localhost:52024を本番オリジンに変更します。

    もちろん、それに伴う大きな制限は、オリジンで実行されているアプリケーションのみが、そのWebpackサーバーのクロスオリジンからの応答を取得できるようになることです。

  • または、リクエストへの応答を処理するWebpack開発サーバーで実行している他のアプリケーションコードでは、Originリクエストヘッダーの値を取得し、それをAccess-Control-Allow-Originレスポンスヘッダー値にエコーバックする必要があります。

    response.setHeader('Access-Control-Allow-Origin', request.headers.Origin)

    これはAccess-Control-Allow-Origin: *と同じ効果があり、ブラウザが任意のOriginで実行されているすべてのフロントエンドJavaScriptが応答にアクセスできるようにしますが、ブラウザがそれを強制しないようにします「…リクエストの認証情報モードがincludeの場合、ワイルドカード*であってはなりません」制限がない場合はヒットします。

更新：いずれの場合も、値がtrueの Access-Control-Allow-Credentials 応答ヘッダーを送信する必要があります。リクエストに認証情報が含まれている場合、ブラウザでフロントエンドのJavaScriptコードがレスポンスにアクセスできるようにするため。

5
sideshowbarker

奇妙なことに、私は今同じダブルスラッシュの問題を抱えていました。これはWebpackのバグである可能性がありますが、よくわかりません。 output.publicPathオブジェクトからmodules.exportを削除すると、修正されました。鉱山はこのように構成されました：

output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, 'dist_dev'),
    publicPath: '/'
},

HTMLテンプレートでは、<base href="http://localhost:3000/">オプションの代わりにoutput.publicPathを使用できます。 この答え を参照してください。

CORSの問題に関しては、提案されているように、アクセス制御ヘッダーを開発サーバーに追加しようとする場合があります ここ 。

1
Rafa