Ich verwende als Umgebung eine Cloud9.io-Ubuntu-VM-Online-IDE und habe mich durch die Fehlerbehebung darauf reduziert, die App nur mit dem Webpack-Entwicklungsserver auszuführen.
Ich starte es mit:
webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT
$ IP ist eine Variable mit der Hostadresse. $ PORT hat die Portnummer.
Ich werde angewiesen, diese Variablen beim Bereitstellen einer App in Cloud 9 zu verwenden, da sie die Standard-IP- und PORT-Informationen enthalten.
Der Server startet und kompiliert den Code, kein Problem, er zeigt mir jedoch nicht die Indexdatei. Nur ein leerer Bildschirm mit "Ungültiger Host-Header" als Text.
Dies ist die Anfrage:
GET / HTTP/1.1
Host: store-client-nestroia1.c9users.io
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
DNT: 1
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8
Das ist mein package.json:
{
"name": "workspace",
"version": "0.0.0",
"scripts": {
"dev": "webpack -d --watch",
"server": "webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT",
"build": "webpack --config webpack.config.js"
},
"author": "Artur Vieira",
"license": "ISC",
"dependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.24.1",
"file-loader": "^0.11.1",
"node-fetch": "^1.6.3",
"react": "^15.5.4",
"react-bootstrap": "^0.30.9",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"url-loader": "^0.5.8",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4",
"whatwg-fetch": "^2.0.3"
}
}
Dies ist die webpack.config.js:
const path = require('path');
module.exports = {
entry: ['whatwg-fetch', "./app/_app.jsx"], // string | object | array
// Here the application starts executing
// and webpack starts bundling
output: {
// options related to how webpack emits results
path: path.resolve(__dirname, "./public"), // string
// the target directory for all output files
// must be an absolute path (use the Node.js path module)
filename: "bundle.js", // string
// the filename template for entry chunks
publicPath: "/public/", // string
// the url to the output directory resolved relative to the HTML page
},
module: {
// configuration regarding modules
rules: [
// rules for modules (configure loaders, parser options, etc.)
{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, "./app")
],
exclude: [
path.resolve(__dirname, "./node_modules")
],
loader: "babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0",
// the loader which should be applied, it'll be resolved relative to the context
// -loader suffix is no longer optional in webpack2 for clarity reasons
// see webpack 1 upgrade guide
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
},
devServer: {
compress: true
}
}
Der Webpack-Entwicklungsserver gibt dies aufgrund meines Host-Setups zurück. In Zeile 60 von webpack-dev-server / lib / Server.js. Von https://github.com/webpack/webpack-dev-server
Meine Frage ist, wie ich mich einrichten kann, um diese Prüfung korrekt zu bestehen. Jede Hilfe wäre sehr dankbar.
quelle
Antworten:
Das Problem tritt auf, weil
webpack-dev-server
2.4.4 eine Hostprüfung hinzufügt. Sie können es deaktivieren, indem Sie dies zu Ihrer Webpack-Konfiguration hinzufügen:EDIT: Bitte beachten Sie, dass dieses Update unsicher ist.
In der folgenden Antwort finden Sie eine sichere Lösung: https://stackoverflow.com/a/43621275/5425585
quelle
Ich habe herausgefunden, dass ich die
public
Eigenschaft von devServer auf den Hostwert meiner Anfrage setzen muss. Da es an dieser externen Adresse angezeigt wird.Also brauchte ich das in meiner webpack.config.js
Eine andere Lösung ist die Verwendung in der CLI:
webpack-dev-server --public $ C9_HOSTNAME <- var für externe Cloud9-IP
quelle
webpack-dev-server
ob diese Änderung kürzlich vorgenommen wurde und der richtige Host-Header erforderlich ist. Weitere Informationen finden Sie unter github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 .Invalid Host header
in einem vue cli-Projekt auf den Fehler stieß.Das hat bei mir funktioniert:
Fügen Sie allowHosts unter devServer in Ihrer webpack.config.js hinzu:
Ich musste die Parameter --host oder --public nicht verwenden.
quelle
public
Parameter, der die als Ziel verwendete URL festlegt (wenn es nicht erraten kann, wie die Seite bereitgestellt wird, was für mich nicht möglich ist).Fügen Sie diese Konfiguration Ihrer Webpack-Konfigurationsdatei hinzu, wenn Sie den webpack-dev-Server verwenden (Sie können den Host weiterhin als 0.0.0.0 angeben).
quelle
Die sicherere Option wäre, allowHosts wie folgt zu Ihrer Webpack-Konfiguration hinzuzufügen:
Das Array enthält alle zulässigen Hosts. Sie können auch Subdomians angeben. Hier erfahren Sie mehr
quelle
Wenn Sie CRA noch nicht verlassen haben, können Sie Ihre Webpack-Konfiguration nicht einfach ändern. Die Konfigurationsdatei ist in versteckt
node_modules/react_scripts/config/webpackDevServer.config.js
. Es wird davon abgeraten, diese Konfiguration zu ändern.Stattdessen können Sie nur die Umgebungsvariable gesetzt ,
DANGEROUSLY_DISABLE_HOST_CHECK
umtrue
die Host - Prüfung zu deaktivieren:quelle
Anstatt die Webpack-Konfigurationsdatei zu bearbeiten, können Sie die Hostprüfung einfacher deaktivieren, indem Sie eine
.env
Datei zu Ihrem Stammordner hinzufügen und Folgendes einfügen :Wie der Variablenname andeutet, ist das Deaktivieren unsicher und nur in Entwicklungsumgebungen ratsam .
quelle
Wenn Sie die Create-React-App auf C9 verwenden, führen Sie zum Starten einfach diesen Befehl aus
Und greifen Sie von Ihrem Hostnamen aus auf die App zu (z. B. geben Sie
$C_HOSTNAME
das Terminal ein, um den Hostnamen zu erhalten).quelle
Wenn Sie
webpack-dev-server
in einem Container ausgeführt werden und über seinen Containernamen Anforderungen an ihn senden, wird diese Fehlermeldung angezeigt. Um Anforderungen von anderen Containern im selben Netzwerk zuzulassen, geben Sie einfach den Containernamen (oder einen beliebigen Namen, der zum Auflösen des Containers verwendet wird) mit der--public
Option an. Dies ist besser, als die Sicherheitsüberprüfung vollständig zu deaktivieren.In meinem Fall lief ich
webpack-dev-server
in einem Container mit dem Namenassets
docker-compose. Ich habe den Startbefehl folgendermaßen geändert:Und der andere Container konnte nun Anfragen über stellen
http://assets:5000
.quelle