Używam środowiska IDE online Cloud9.io ubuntu VM i ograniczyłem się, rozwiązując ten błąd, do uruchamiania aplikacji z serwerem deweloperskim Webpack.
Uruchamiam go za pomocą:
webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT
$ IP to zmienna, która ma adres hosta, a $ PORT ma numer portu.
Poinstruowano mnie, aby używać tych zmiennych podczas wdrażania aplikacji w chmurze 9, ponieważ mają one domyślne informacje o adresie IP i porcie.
Serwer uruchamia się i kompiluje kod, nie ma problemu, ale nie pokazuje mi pliku indeksu. Tylko pusty ekran z tekstem „Nieprawidłowy nagłówek hosta”.
To jest żądanie:
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
To jest mój plik 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"
}
}
To jest plik 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
}
}
Serwer deweloperski pakietu Webpack zwraca to z powodu mojej konfiguracji hosta. W webpack-dev-server / lib / Server.js line 60. Z https://github.com/webpack/webpack-dev-server
Moje pytanie brzmi, jak skonfigurować, aby poprawnie przejść ten test. Każda pomoc byłaby bardzo mile widziana.
źródło
Odpowiedzi:
Problem występuje, ponieważ
webpack-dev-server
2.4.4 dodaje sprawdzanie hosta. Możesz go wyłączyć, dodając to do konfiguracji swojego pakietu internetowego:EDYCJA: Uwaga, ta poprawka nie jest bezpieczna.
Zapoznaj się z następującą odpowiedzią, aby uzyskać bezpieczne rozwiązanie: https://stackoverflow.com/a/43621275/5425585
źródło
Dowiedziałem się, że muszę ustawić
public
właściwość devServer na wartość hosta mojego żądania. Ponieważ będzie wyświetlany pod tym adresem zewnętrznym.Więc potrzebowałem tego w moim webpack.config.js
Innym rozwiązaniem jest użycie go w CLI:
webpack-dev-server --public $ C9_HOSTNAME <- var dla zewnętrznego adresu IP Cloud9
źródło
webpack-dev-server
ostatnio wprowadzono tę zmianę, która wymaga poprawnego nagłówka hosta. Więcej informacji można znaleźć pod adresem github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 .Invalid Host header
błąd w projekcie vue cli.Oto, co zadziałało dla mnie:
Dodaj allowedHosts w devServer w swoim webpack.config.js:
Nie musiałem używać parametrów --host ani --public.
źródło
public
parametr jest tym, co ustawia adres URL używany jako cel (jeśli nie może go odgadnąć na podstawie sposobu wyświetlania strony, co dla mnie nie może).Dodaj tę konfigurację do pliku konfiguracyjnego pakietu webpack podczas korzystania z serwera webpack-dev-server (nadal możesz określić hosta jako 0.0.0.0).
źródło
Bardziej bezpieczną opcją byłoby dodanie allowedHosts do konfiguracji WebPacka w następujący sposób:
Tablica zawiera wszystkie dozwolone hosty, możesz także określić subdomeny. sprawdź więcej tutaj
źródło
Jeśli jeszcze nie wyłączyłeś się z CRA, nie możesz łatwo zmodyfikować konfiguracji swojego webpacka. Plik konfiguracyjny jest ukryty w
node_modules/react_scripts/config/webpackDevServer.config.js
. Odradza się zmienianie tej konfiguracji.Zamiast tego, można po prostu ustawić zmienną środowiskową
DANGEROUSLY_DISABLE_HOST_CHECK
abytrue
wyłączyć sprawdzanie hosta:źródło
Zamiast edytować plik konfiguracyjny pakietu internetowego, łatwiejszym sposobem wyłączenia sprawdzania hosta jest dodanie
.env
pliku do folderu głównego i umieszczenie tego:Jak wskazuje nazwa zmiennej, wyłączenie jej jest niebezpieczne i zalecane jest używanie tylko w środowisku deweloperskim.
źródło
Jeśli używasz aplikacji create-react-app na C9, po prostu uruchom to polecenie, aby rozpocząć
I
$C_HOSTNAME
uzyskaj dostęp do aplikacji z dowolnej nazwy hosta (np. Wpisz terminal, aby uzyskać nazwę hosta)źródło
Jeśli pracujesz
webpack-dev-server
w kontenerze i wysyłasz do niego żądania za pośrednictwem jego nazwy, pojawi się ten błąd. Aby zezwolić na żądania z innych kontenerów w tej samej sieci, po prostu podaj nazwę kontenera (lub inną nazwę używaną do rozpoznania kontenera) za pomocą--public
opcji. Jest to lepsze niż całkowite wyłączenie kontroli bezpieczeństwa.W moim przypadku działałem
webpack-dev-server
w kontenerze o nazwieassets
docker-compose. Zmieniłem polecenie start na to:Drugi kontener mógł teraz wysyłać żądania za pośrednictwem
http://assets:5000
.źródło