wake-up-neo.net

Webpack-dev-server CORS-Fehler mit Berechtigungsnachweisen

Ich bekomme CORS-Probleme mit Hot Module Reloading - Dev Server. Ich verwende den Dev-Server für Port 3000, aber die Anwendung wird von einem anderen Port http://localhost:52024/ aus bedient.

Dies ist der Fehler, den ich bekomme (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!

Tatsächlich erhalte ich zwei Fehler: Der erste wird durch den doppelten Schrägstrich // im Pfad verursacht, der andere ist der mit CORS in Zusammenhang stehende Fehler. Dies ist mein 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": "*"
        }
    }
};

Ich beginne das Webpack mit:

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

Irgendeine Idee? Ich verwende webpack 3.5.1 und webpack-dev-server 2.7.1 Danke.

6
aghidini

Zur Behebung des CORS-Problems haben Sie folgende Möglichkeiten:

  • In Ihrem webpack.config.js-Hardcode http://localhost:52024 als zulässiger Ursprung in den Wert des Access-Control-Allow-Origin-Antwortheaders:

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

    Wenn Sie den Produktionsserver/die Domäne für Ihre Anwendung eingerichtet haben, ändern Sie diesen http://localhost:52024 natürlich in den Ursprungsort der Produktion.

    Natürlich besteht die große Einschränkung darin, dass nur Ihre Anwendung, die auf Origin ausgeführt wird, Antworten von diesem Webpack-Server cross-Origin erhalten kann.

  • Alternativ müssen Sie in jedem anderen Anwendungscode, den Sie auf dem Webpack-Dev-Server ausführen, der auf Anforderungen reagiert, den Wert des Anforderungsheaders Origin abrufen und diesen Wert einfach in den Antwortheaderwert Access-Control-Allow-Origin zurückgeben:

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

    Dies hat den gleichen Effekt wie Access-Control-Allow-Origin: *, sofern der Browser keinen Frontend-JavaScript-Zugriff auf die Antworten zulässt. Dies hindert den Browser jedoch auch daran, dass "... darf nicht der Platzhalter sein. * Wenn der Anmeldeinformationsmodus der Anforderung includeEinschränkung ist, wird dies andernfalls getroffen.


Update: In beiden Fällen müssen Sie auch einen Access-Control-Allow-Credentials - Antwortheader mit dem Wert true senden, damit Browser Ihren Frontend-JavaScript-Code auf die Antwort zugreifen können, wenn Berechtigungsnachweise enthalten sind in der Anfrage.

5
sideshowbarker

Seltsam, ich hatte gerade das gleiche Problem mit den doppelten Schrägstrichen. Dies könnte ein Webpack-Fehler sein, ich bin mir nicht sicher. Durch das Entfernen des output.publicPath-Formulars wurde das modules.export-Objekt für mich behoben. Meine war so konfiguriert:

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

Sie können <base href="http://localhost:3000/"> in Ihrer HTML-Vorlage anstelle der output.publicPath-Option verwenden. Siehe diese Antwort .

In Bezug auf CORS-Probleme können Sie versuchen, dem Dev-Server Zugriffskontrollheader hinzuzufügen, wie vorgeschlagen hier .

1
Rafa