Webpack-dev-server mit CORS-Fehler mit Anmeldeinformationen

Ich bin immer CORS Probleme mit hot module nachladen - dev-server. Ich bin mit dem dev-server auf port 3000 aber die Anwendung wird serviert von einem anderen port http://localhost:52024/.

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

Eigentlich bin ich immer zwei Fehler: der erste ist verursacht durch doppelten Schrägstrich // im Pfad, die andere ist die CORS-bezogene 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 bin ab webpack mit:

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

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

InformationsquelleAutor aghidini | 2017-08-08

5

Soweit die Festsetzung der CORS-problem, Sie können führen Sie einen der folgenden Schritte aus:
- In Ihrem webpack.config.js fest http://localhost:52024 als erlaubt Ursprung in den Wert des Access-Control-Allow-Origin - header der Antwort:
```
headers: {
    "Access-Control-Allow-Origin": "http://localhost:52024"
}
```
  Und dann natürlich sobald Sie den Produktions-server/Domäne für Ihre Anwendung zu ändern, dass http://localhost:52024 werden, was die Produktion Herkunft ist.
  
  Natürlich die große Einschränkung, dass würde mit sich bringen, ist, nur Ihre Anwendung auf die Herkunft erlaubt werden zu Holen Sie sich die Antworten aus, die webpack-server, cross-origin.
- Alternativ, in was auch immer andere Anwendung, die Codes laufen auf dieser webpack dev-server, verarbeitet die Anfragen, die Sie brauchen, um den Wert der Origin - request-header, und nur echo, die wieder in die Access-Control-Allow-Origin Antwort-header-Wert:
```
response.setHeader('Access-Control-Allow-Origin', request.headers.origin)
```
  Werde, die die gleiche Wirkung haben wie Access-Control-Allow-Origin: * so weit wie veranlassen Sie den browser, damit jede frontend JavaScript ausgeführt Ursprung Zugriff auf die Antworten—aber es wird auch verhindern, dass der browser von der Verhängung dass "...muss nicht sein das wildcard - * wenn die Aufforderung die Anmeldeinformationen Modus ist include" Einschränkung, die Sie sonst getroffen zu werden.
Update: In jedem Fall müssen Sie auch senden Sie eine Access-Control-Allow-Credentials response-header mit dem Wert true um eine Ursache für Browser zu ermöglichen, Ihre frontend-JavaScript-code, um den Zugriff auf die Antwort, wenn Anmeldeinformationen in der Anforderung enthalten sind.

InformationsquelleAutor sideshowbarker
1

Seltsam, ich hatte das gleiche doppelte Schrägstriche Problem jetzt. Dies könnte ein Webpack bug, ich bin mir nicht sicher. Entfernen der output.publicPath form der modules.export Objekt fixiert es für mich. Mir war so konfiguriert:
```
output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, 'dist_dev'),
    publicPath: '/'
},
```
Könnten Sie <base href="http://localhost:3000/"> in Ihr HTML-template anstelle des output.publicPath option. Sehen diese Antwort.

Bezüglich CORS Probleme, die Sie könnten versuchen, hinzufügen von access-control-Header auf dem dev-server wie vorgeschlagen hier.
- Danke, ich habe versucht, Ihre Lösung, aber es hat nicht geklappt, hat sich nichts geändert.
InformationsquelleAutor Rafa

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.