Javascript 我得到了一个“答案”;无效的主机头“;远程连接到Web包开发服务器时的消息
我正在使用Cloud9.io ubuntu VM Online IDE作为一个环境,通过排除此错误,我将其简化为只使用Webpack dev server运行应用程序 我用以下方式启动它:Javascript 我得到了一个“答案”;无效的主机头“;远程连接到Web包开发服务器时的消息,javascript,webpack,webpack-dev-server,Javascript,Webpack,Webpack Dev Server,我正在使用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中部署应用程序时使用这些VAR,因为它们具有默认的IP和端口信息 服务器启动
webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT
$IP是一个具有主机地址的变量
$PORT具有端口号
我被指示在Cloud 9中部署应用程序时使用这些VAR,因为它们具有默认的IP和端口信息
服务器启动并编译代码,没问题,但它没有显示索引文件。只有“无效主机标题”作为文本的空白屏幕
请求如下:
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
这是my 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"
}
}
这是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
}
}
devServer: {
compress: true,
inline: true,
port: '8080',
allowedHosts: [
'.amazonaws.com'
]
},
由于我的主机设置,网页包开发服务器正在返回此消息。在webpack dev server/lib/server.js第60行中。从
我的问题是如何设置以正确通过此检查。任何帮助都将不胜感激。我发现,我需要将devServer的
public
属性设置为请求的主机值。因为它将显示在该外部地址
所以我需要在我的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 dev server--public$C9_HOSTNAME出现此问题的原因是webpack dev server
2.4.4添加了主机检查。您可以通过将此项添加到您的网页配置来禁用它:
devServer: {
compress: true,
disableHostCheck: true, // That solved it
}
编辑:请注意,此修复程序不安全
有关安全解决方案,请参见以下答案:
如果您在C9上使用create react应用程序,只需运行此命令即可启动
npm run start --public $C9_HOSTNAME
并从您的主机名访问应用程序(例如在终端中键入$C_hostname
以获取主机名)使用webpack dev server时将此配置添加到您的webpack config文件中(您仍然可以将主机指定为0.0.0.0)
这就是我的工作原理:
在webpack.config.js中的devServer下添加allowedHosts:
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
}
}
devServer: {
compress: true,
inline: true,
port: '8080',
allowedHosts: [
'.amazonaws.com'
]
},
我不需要使用--host或--public参数。更安全的选项是将allowedHosts添加到您的网页配置中,如下所示:
module.exports = {
devServer: {
allowedHosts: [
'host.com',
'subdomain.host.com',
'subdomain2.host.com',
'host2.com'
]
}
};
数组包含所有允许的主机,您还可以指定子域 如果您尚未退出CRA,则无法轻松修改您的网页配置。配置文件隐藏在node\u modules/react\u scripts/config/webpackDevServer.config.js
中。不鼓励您更改该配置
相反,您只需将环境变量危险地禁用主机检查
设置为true
即可禁用主机检查:
危险地禁用主机检查=真纱线开始
#或等效的npm命令
禁用主机检查的更简单方法是将.env
文件添加到根文件夹,并将以下内容放入其中,而不是编辑网页包配置文件:
DANGEROUSLY_DISABLE_HOST_CHECK=true
正如变量名所暗示的,禁用它是不安全的,只建议在开发环境中使用。如果您在容器中运行webpack dev server
,并通过其容器名向其发送请求,则会出现此错误。要允许来自同一网络上其他容器的请求,只需使用--public
选项提供容器名称(或用于解析容器的任何名称)。这比完全禁用安全检查要好
在我的例子中,我使用docker compose在名为assets
的容器中运行webpack dev server
。我将start命令更改为:
webpack-dev-server --mode development --host 0.0.0.0 --public assets
另一个容器现在可以通过http://assets:5000
开发者你好,
而不是这样做
disableHostCheck:true,
位于webpackDevServer.config.js中。通过向项目中添加一个.env文件,在.env文件中添加变量host=0.0.0和危险地禁用\u host\u CHECK=true,可以轻松解决.invalid host headers'错误。如果要在webpackDevServer.config.js中进行更改,则需要使用'npm run eject'提取react脚本,但不建议这样做。因此,更好的解决方案是在项目的.env文件中添加上述变量
快乐编码:)我在使用Windows Linux子系统(WSL2)时遇到了这个问题,因此我也将分享这个解决方案
我的目标是在wsl:3000
和localhost:3000
上呈现webpack的输出,从而创建一个备用的本地端点
正如您所料,这最初导致出现“无效主机头”错误。在我添加如下所示的devServer配置选项之前,似乎没有任何帮助
module.exports={
//...
开发服务器:{
代理:[
{
上下文:['http://wsl:3000'],
目标:'http://localhost:3000',
},
],
},
}
这在不引入任何安全风险的情况下修复了“bug”
参考:webpack我通过在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;
}
}
我补充说:
代理集头主机$HOST强>
代理\u集\u头Referer$http\u Referer由于webpack dev server 4,您需要将其添加到配置中:
devServer:{
防火墙:错,
}
问题似乎超出了评论范围。我不明白问题是如何发生的。你能给我指出正确的方向吗?这是我在RedwoodJS中的解决方案:今天也遇到了!谢谢你的发帖!今天也碰到了这个。看起来webpack dev server
最近进行了此更改,需要正确的主机头。有关更多信息,请参阅。此更改也会影响webpack dev server 1.16.4。您可以在此处阅读更多信息:。此w