web-dev-qa-db-fra.com

Erreur CORS Webpack-dev-server avec les informations d'identification

Je reçois des problèmes avec le rechargement à chaud de modules - serveur dev. J'utilise le serveur de développement sur le port 3000 mais l'application est servie à partir d'un autre port http://localhost:52024/.

C'est l'erreur que je reçois (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!

En fait, je reçois deux erreurs: la première est due à la double barre oblique // dans le chemin, l’autre est l’erreur liée à CORS. C'est mon 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": "*"
        }
    }
};

Je commence webpack avec:

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

Une idée? J'utilise webpack 3.5.1 et webpack-dev-server 2.7.1 Merci.

webpackcorswebpack-dev-serverhot-module-replacement
6
aghidini

En ce qui concerne la résolution du problème CORS, vous pouvez effectuer l’une des opérations suivantes:

  • Dans votre webpack.config.js hardcode http://localhost:52024 en tant qu'origine autorisée dans la valeur de l'en-tête de réponse Access-Control-Allow-Origin:

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

    Et bien sûr, une fois que le serveur/domaine de production est configuré pour votre application, modifiez ce http://localhost:52024 en remplaçant l’origine par la production.

    Bien sûr, la grande limitation qui en résulterait est que seule votre application exécutée à l'origine sera autorisée à obtenir des réponses de ce serveur Webpack cross-Origin.

  • Sinon, quel que soit le code d'application que vous exécutez sur ce serveur de développement Webpack qui gère les réponses aux demandes, vous devez obtenir la valeur de l'en-tête de la demande Origin et simplement l'inscrire dans la valeur de Access-Control-Allow-Origin en-tête de réponse:

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

    Cela aura le même effet que Access-Control-Allow-Origin: * dans la mesure où le navigateur autorisera l'accès de toutes les réponses du JavaScript frontal avec n'importe quel serveur Origin à n'importe quelle origine. Mais cela empêchera également le navigateur d'imposer que «… ne doit pas être le caractère générique». * lorsque le mode d'identification de la demande est include ”} _ restriction qui, sinon, serait touchée.

Update: Dans les deux cas, vous devrez également envoyer un en-tête Access-Control-Allow-Credentials response avec la valeur true afin que les navigateurs autorisent votre code JavaScript frontal à accéder à la réponse si des informations d'identification sont incluses dans le fichier. demande.

5
sideshowbarker

Étrange, j'avais le même problème de double barre oblique en ce moment. Cela pourrait être un bug de Webpack, je ne suis pas sûr. Le retrait de output.publicPath de l'objet modules.export l'a corrigé pour moi. Le mien a été configuré comme ceci:

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

Vous pouvez utiliser <base href="http://localhost:3000/"> dans votre modèle HTML au lieu de l'option output.publicPath. Voir cette réponse .

En ce qui concerne les problèmes CORS, vous pouvez essayer d’ajouter des en-têtes de contrôle d’accès au serveur de développement, comme suggéré ici .

1
Rafa