webpack-dev-server에 원격으로 연결하면 "Invalid Host header" 메시지가 나타난다.
환경으로서 Cloud9.io ubuntu VM Online IDE 를 사용하고 있으며, 이 에러를 트러블 슈팅 하고, Webpack dev server 로만 앱을 실행하도록 했습니다.
다음을 사용하여 실행합니다.
webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT
$IP는 호스트 주소 $PORT에 포트 번호가 있는 변수입니다.
Cloud 9에서 앱을 배포할 때 기본 IP와 PORT 정보가 있으므로 이러한 변수를 사용하도록 지시받았습니다.
서버가 부팅되어 코드가 컴파일 됩니다.문제 없습니다만, 인덱스 파일은 표시되지 않습니다.텍스트로 "Invalid Host header"가 있는 빈 화면만 표시됩니다.
요청은 다음과 같습니다.
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
제 소포입니다.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"
}
}
다음은 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
}
}
호스트 설정으로 인해 웹 팩 개발 서버에서 이 정보를 반환하고 있습니다.webpack-dev-server/lib/Server.js 행 60 입니다.https://github.com/webpack/webpack-dev-server 에서
문제는 이 검사를 올바르게 통과하도록 설정하는 방법입니다.어떤 도움이라도 주시면 감사하겠습니다.
는 " " " 때문에 발생합니다.webpack-dev-server2.4.4를 Web 팩 설정에 다음의 것을 추가하는 것으로, 디세블로 할 수 있습니다.
devServer: {
compress: true,
disableHostCheck: true, // That solved it
}
이 수정은 안전하지 않습니다.
안전한 솔루션에 대해서는, 다음의 회답을 참조해 주세요.
옵션이 버전에 리팩터링되었습니다.4.0.0 . 。allowedHosts이제 옵션을 사용해야 합니다.
devServer: {
allowedHosts: "all"
}
내가 알아냈는데, 내가 이걸 세팅할 필요가 있다는 걸publicvalue.devServer로 합니다.그 외부 주소에 표시됩니다.
그래서 이게 제 webpack.config.js에 필요했어요.
devServer: {
compress: true,
public: 'store-client-nestroia1.c9users.io' // That solved it
}
다른 솔루션은 CLI에서 사용하고 있습니다.
webpack-dev-server --public $C9_HOSTNAME <-- var for Cloud9 external IP
이것이 나에게 효과가 있었다.
추가 허용webpack.config.js의 devServer 아래에 있는 호스트:
devServer: {
compress: true,
inline: true,
port: '8080',
allowedHosts: [
'.amazonaws.com'
]
},
--host 또는 --public params를 사용할 필요가 없었습니다.
webpack-dev-server 를 사용하는 경우는, 이 설정을 Web pack 설정 파일에 추가합니다(호스트를 0.0.0 으로 지정할 수도 있습니다).
devServer: {
disableHostCheck: true,
host: '0.0.0.0',
port: 3000
}
, Web 의 설정보다, 「」, 「Web pack」, 「Web pack」을 합니다..env하다
DANGEROUSLY_DISABLE_HOST_CHECK=true
변수 이름이 나타내듯이 비활성화는 안전하지 않으므로 개발 환경에서만 사용하는 것이 좋습니다.
보다 안전한 옵션은 allowed를 추가하는 것입니다.다음과 같이 웹 팩 구성에 대한 호스트:
module.exports = {
devServer: {
allowedHosts: [
'host.com',
'subdomain.host.com',
'subdomain2.host.com',
'host2.com'
]
}
};
어레이에 허용된 모든 호스트가 포함되어 있으며 하위 도메인도 지정할 수 있습니다.자세한 내용은 이쪽에서 확인하세요.
CRA에서 아직 이젝트하지 않은 경우 웹 팩 설정을 쉽게 변경할 수 없습니다.은, 「」에 .node_modules/react_scripts/config/webpackDevServer.config.js이 설정을 변경하는 것은 권장되지 않습니다.
환경변수 .DANGEROUSLY_DISABLE_HOST_CHECK로로 합니다.true'CHANGE: 'CHANGE: 'CHANGE: 'CHANGE: 'CHANGE:
DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start
# or the equivalent npm command
를 실행하고 있는 webpack-dev-server컨테이너에서 해당 컨테이너 이름을 통해 요청을 전송하고 있는 경우 이 오류가 발생합니다. 다른 하려면 , 를 을합니다.--public를 완전히 보다 이 더 낫습니다.이 방법은 보안 검사를 완전히 비활성화하는 것보다 낫습니다.
저 같은 경우에는 달리고 있었어요.webpack-dev-server기로라고 하는 assets도킹 스테이션이 붙어 있습니다. 명령어로 했습니다.
webpack-dev-server --mode development --host 0.0.0.0 --public assets
그리고 이제 다른 컨테이너는 다음을 통해 요청을 할 수 있게 되었습니다.http://assets:5000.
param param json json, json, param json, param json, param json, param json, param json, param json, param json, param json을 .--disableHostCheck=true들면 다음과 같습니다.
"scripts": {
"start": "ng serve --host=0.0.0.0 --configuration=dev --disableHostCheck=true"
}
C9에서 create-react-app을 사용하는 경우 이 명령을 실행하여 시작하세요.
npm run start --public $C9_HOSTNAME
종류에 , 할 수 「」, 「유형」, 「유형」 등).$C_HOSTNAME호스트명을 취득하기 위해서, 단말기로 액세스 합니다).
이 투고와 관련된 웹 팩5에서 디폴트 동작(설정 파일 없음)을 사용하고 있는 경우:[ ]
"scripts": {
"dev": "webpack serve --mode development --env development --hot --port 3000"
...
...
},
"devDependencies": {
...
"webpack": "^5.10.1",
"webpack-cli": "^4.2.0"
},
5 Web Pack 5 포함webpack serve --help:
Usage: webpack serve|server|s [entries...] [options]
Run the webpack dev server.
Options:
-c, --config <value...> Provide path to a webpack configuration file e.g.
./webpack.config.js.
--config-name <value...> Name of the configuration to use.
-m, --merge Merge two or more configurations using
'webpack-merge'.
--env <value...> Environment passed to the configuration when it
is a function.
--node-env <value> Sets process.env.NODE_ENV to the specified value.
--progress [value] Print compilation progress during build.
-j, --json [value] Prints result as JSON or store it in a file.
-d, --devtool <value> Determine source maps to use.
--no-devtool Do not generate source maps.
--entry <value...> The entry point(s) of your application e.g.
./src/main.js.
--mode <value> Defines the mode to pass to webpack.
--name <value> Name of the configuration. Used when loading
multiple configurations.
-o, --output-path <value> Output location of the file generated by webpack
e.g. ./dist/.
--stats [value] It instructs webpack on how to treat the stats
e.g. verbose.
--no-stats Disable stats output.
-t, --target <value...> Sets the build target e.g. node.
--no-target Negative 'target' option.
--watch-options-stdin Stop watching when stdin stream has ended.
--no-watch-options-stdin Do not stop watching when stdin stream has ended.
--bonjour Broadcasts the server via ZeroConf networking on
start
--lazy Lazy
--liveReload Enables/Disables live reloading on changing files
--serveIndex Enables/Disables serveIndex middleware
--inline Inline mode (set to false to disable including
client scripts like livereload)
--profile Print compilation profile data for progress steps
--progress Print compilation progress in percentage
--hot-only Do not refresh page if HMR fails
--stdin close when stdin ends
--open [value] Open the default browser, or optionally specify a
browser name
--useLocalIp Open default browser with local IP
--open-page <value> Open default browser with the specified page
--client-log-level <value> Log level in the browser (trace, debug, info,
warn, error or silent)
--https HTTPS
--http2 HTTP/2, must be used with HTTPS
--key <value> Path to a SSL key.
--cert <value> Path to a SSL certificate.
--cacert <value> Path to a SSL CA certificate.
--pfx <value> Path to a SSL pfx file.
--pfx-passphrase <value> Passphrase for pfx file.
--content-base <value> A directory or URL to serve HTML content from.
--watch-content-base Enable live-reloading of the content-base.
--history-api-fallback Fallback to /index.html for Single Page
Applications.
--compress Enable gzip compression
--port <value> The port
--disable-host-check Will not check the host
--socket <value> Socket to listen
--public <value> The public hostname/ip address of the server
--host <value> The hostname/ip address the server will bind to
--allowed-hosts <value...> A list of hosts that are allowed to access the
dev server, separated by spaces
Global options:
--color Enable colors on console.
--no-color Disable colors on console.
-v, --version Output the version number of 'webpack',
'webpack-cli' and 'webpack-dev-server' and
commands.
-h, --help [verbose] Display help for commands and options.
To see list of all supported commands and options run 'webpack --help=verbose'.
Webpack documentation: https://webpack.js.org/.
CLI documentation: https://webpack.js.org/api/cli/.
Made with ♥ by the webpack team.
Done in 0.44s.
솔루션
그냥 붙이면 돼요.--disable-host-checkwebpack serve명령어를 사용합니다.
Hello React Developers,
하는 것이 disableHostCheck: true,webpackDevServer.config.js로 이동합니다..env 파일을 프로젝트에 추가하고, 변수 HOST=0.0.0 및 DANGERLLY_DISABLE_HOST_CHECK=true를 .env 파일에 추가하면 '호스트 헤더 삭제' 오류를 쉽게 해결할 수 있습니다.webpackDevServer.config.js를 변경하려면 권장되지 않는 'npm run eject'를 사용하여 react-scripts를 추출해야 합니다.따라서 상기 변수를 프로젝트의 .env 파일에 추가하는 것이 좋습니다.
해피 코딩 :)
Windows Subsystem for Linux(WSL2)를 사용하는 중에 이 문제가 발생했기 때문에 이 솔루션도 공유하겠습니다.
는 웹 팩의 을 모두 웹 팩에서 이었습니다.wsl:3000 ★★★★★★★★★★★★★★★★★」localhost:3000따라서 대체 로컬엔드포인트가 생성됩니다.
예상대로 처음에는 "Invalid Host header" 오류가 발생했습니다.아래 devServer config 옵션을 추가할 때까지 아무것도 도움이 되지 않는 것 같습니다.
module.exports = {
//...
devServer: {
proxy: [
{
context: ['http://wsl:3000'],
target: 'http://localhost:3000',
},
],
},
}
이것에 의해, 시큐러티 리스크는 발생하지 않고, 「버그」를 수정했습니다.
레퍼런스: webpack DevServer 문서
도커 컨테이너 내에서 실행되고 있는nginx를 사용하여 URL을 기반으로 트래픽을 라우팅하고 있습니다.
nginx config 파일에 다음 두 줄의 코드를 추가하면 Invalid Host 헤더가 수정되었습니다.설정 파일(default.conf)에 대해서는, 이하를 참조해 주세요.
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $remote_addr;
먼저 nginx 컨테이너를 만들고 루팅을 설정하기 위한 간단한 2개의 라이너 도커 파일입니다.
FROM nginx
COPY ./default.conf /etc/nginx/conf.d/default.conf
따라서 이미지가 빌드되면 default.conf 파일이 nginx 컨테이너 내의 컨피규레이션디렉토리에 카피됩니다.
다음으로 default.conf 파일은 다음과 같습니다.
upstream ui {
# The ui service below is a ui app running inside of a container. Inside of the container, the ui app is listening on port 3000.
server ui:3000;
}
upstream node-app {
# The node-app service below is a server app running inside of a container. Inside of the container, the server is listening on port 8080.
server node-app:8080;
}
server {
listen 80;
location / {
# The root path, with is '/' will routed to ui.
proxy_pass http://ui;
################## HERE IS THE FIX ##################
# Adding the following two lines of code finally made the error "Invalid Host header" go away.
# The following two headers will pass the client ip address to the upstream server
# See upstream ui at the very begining of this file.
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $remote_addr;
}
location /api {
# Requests that have '/api' in the path are rounted to the express server.
proxy_pass http://node-app;
}
}
#
마지막으로 모든 서비스(nginx 포함)가 포함된 도커 컴포지트 파일을 보시려면 여기 있습니다.
version: '3'
services:
# This is the nginx service.
proxy:
build:
# The proxy folder will have the Dockerfile and the default.conf file I mentioned above.
context: ./proxy
ports:
- 7081:80
redis-server:
image: 'redis'
node-app:
restart: on-failure
build:
context: ./globoappserver
ports:
- "9080:8080"
container_name: api-server
ui:
build:
context: ./globo-react-app-ui
environment:
- CHOKIDAR_USEPOLLING=true
ports:
- "7000:3000"
stdin_open: true
volumes:
- ./globo-react-app-ui:/usr/app
postgres:
image: postgres
volumes:
- postgres:/var/lib/postgresql/data
- ./init-database.sql:/docker-entrypoint-initdb.d/init-database.sql
environment:
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=password
volumes:
postgres:
2021년에 webpack-dev-server v4+로 여기 오는 사람
allowedHosts ★★★★★★★★★★★★★★★★★」disableHostsCheck allowedHosts: 'all'
오류를 제거하려면 devServer를 다음과 같이 변경합니다.
devServer: {
compress: true,
allowedHosts: 'all'
}
nginx 설정에서 호스트 헤더의 프록시를 추가하여 이 문제를 해결했습니다.
server {
listen 80;
server_name localhost:3000;
location / {
proxy_pass http://myservice:8080/;
proxy_set_header HOST $host;
proxy_set_header Referer $http_referer;
}
}
나는 다음과 같이 덧붙였다.
proxy_set_header HOST $host;
proxy_set_header Referer $http_referer;
webpack-dev-server 4 web since since::::::::: this this this this this에 추가해야 합니다.
devServer: {
firewall: false,
}
vue-cli 사용자 참고:
같은 행의 vue.config.disc 파일을 루트에 넣습니다.
module.exports = {
configureWebpack: {
devServer: {
public: '0.0.0.0:8080',
host: '0.0.0.0',
disableHostCheck: true,
}
}
};
에는 "HTTP "/"가 됩니다.Host(URL) raw HTTP 입니다. 보안로서, 이 체크는 「」/「 」 / 「 」Hostheader는 HTTP 서버가 예상한 것과 일치해야 서버가 예상한 것을 반환할 수 있습니다.
Dev (WDS는, 「Webpack Dev Server(WDS)」를 가지는 Host header headernamesnamesnamesnames 등 일반적인 호스트명과 localhost치 않은 「」와 Host헤더는 서버가 아직 뭔가로 응답해야 합니다.따라서 최소한의 응답으로 표준 HTTP 오류 코드와 HTML로 "Invalid Host header"라는 사람이 읽을 수 있는 메시지를 보냅니다.
이 문제를 해결하는 방법에는 기본적으로 두 가지 옵션이 있습니다. 많은( 모든 WDS를 하도록 WDS에 지시합니다.HostHTTP " " " " " 입니다.
웹 팩 구성
일반적으로는, 보다 많은 「호스트」명을 사용할 수 있도록, WDS 의 설정에 지시하는 것이 보다 간단하고, 보다 정확합니다.는 로컬 만을 받아들이기 「WDS」를 .localhostheader」의 문제는 다른 할 에 가장 합니다.「 Invalid Host header 」라고 하는 것은, 「Invalid Host header 」라고 하는 것입니다.「 」를 한 후host: '0.0.0.0'devServer클라이언트가 WDS와 통신하기 위해 사용할 수 있는 이름을 WDS에 통지해야 합니다. require('os').hostname()는, 통상은 호스트명(의 1개)이지만, 그 외의 이름도 유효할 수 있습니다.이 때문에, WDS 는 허가된 이름의 리스트를 받아들입니다.
module.exports = {
//...
devServer: {
allowedHosts: [
require('os').hostname(),
'host.com',
'subdomain.host.com',
'subdomain2.host.com',
'host2.com'
]
}
};
다만, 이 리스트를 올바르게 하는 것은, 필요 이상으로 귀찮을 수 있기 때문에, WDS 에 호스트 헤더 체크를 무시하도록 지시하는 것만으로 충분합니다.Webpack 4에서는 옵션이었습니다.Webpack 5에서는allowedHosts옵션을 단일 문자열(배열 없음)로 설정할 수 있습니다.
CRA(React App) 생성
패키지 ★★★★★★★★★★★★★★★★★★★」create-react-app는 내부적으로 웹 팩을 사용합니다.CRA에는 이 특정 설정을 덮어쓰기 위한 추가 환경변수가 있습니다.
다른 호스트 헤더 전송
Web pack 의 설정을 변경할 수 없는 경우는, 클라이언트의 설정을 변경하는 방법도 있습니다.
으로는 '우리'를 하는 방법이 .hosts호스트명이 서버의 IP에 매핑될 필요가 있도록 클라이언트머신에 파일을 저장합니다.
보다 일반적인 것은 역방향 프록시가 WDS 앞에 있는 경우입니다.프록시에 따라 백엔드(WDS)로 전송되는 요청의 기본값이 다릅니다.으로 ' 낫다'를 할 도 있어요.HostVivekDev의 답변에서 알 수 있듯이 백엔드에 대한 요구에 대한 헤더입니다.
이 문제는 다음 두 가지 상황에서 발생할 수 있습니다.
- 할 때
webpack-dev-servercloud-9 의 온라인 IDE 또는 이외의 다른 IDE에서 할 수 있습니다. - 모바일에서 개발 모드를 실행하거나 로컬 호스트의 공개 URL(ngrok 사용 등)을 통해 다른 사람과 웹 앱을 빠르게 공유하고 싶은 경우.을 위해할 수 .
webpack-dev-server.
이것은, 다음의 방법으로 실시할 수 있습니다.
devServer: {
allowedHosts: 'auto' | 'all' | Array[string]
}
- 보안을 고려하지 않을 경우 허용을 설정할 수 있습니다.호스트가 '모두'로 지정됨(단, 권장되지 않음)
- some-host-url을 사용하여 공개 URL을 작성하는 경우 다음과 같이 수행할 수 있습니다.
devServer: {
allowedHosts: [
'host.com',
'subdomain.host.com'
]
}
webpack-dev-server 4.7의 경우 --allowed-hosts all 을 사용할 수 있습니다.
npx webpack serve --open --allowed-hosts all
위의 제안을 시도했지만 다음 해결 방법이 작동하지 않았습니다.
devServer: {
allowedHosts: 'auto' | 'all' | Array[string]
}
다음과 같은 솔루션이 효과적입니다.
devServer: {
disableHostCheck: true
}
언급URL : https://stackoverflow.com/questions/43619644/i-am-getting-an-invalid-host-header-message-when-connecting-to-webpack-dev-ser
'source' 카테고리의 다른 글
| 읽기 전용 목록 또는 수정 가능한 목록을 읽습니다.Net4.0 (0) | 2022.12.25 |
|---|---|
| "서브쿼리가 두 개 이상의 행을 반환함" 오류 해결 방법 (0) | 2022.12.25 |
| Python에서 동적(파라미터화) 단위 테스트를 생성하는 방법은 무엇입니까? (0) | 2022.12.25 |
| MariaDB 10.2가 Percona XtraDB 대신 InnoDB를 다시 사용하는 이유는 무엇입니까? (0) | 2022.12.25 |
| Java에서 문자열을 패딩하려면 어떻게 해야 하나요? (0) | 2022.12.05 |