webpack-dev-server 启动项目 Invalid Host header

作者: tww844475003 分类: 前端开发 发布时间: 2021-12-13 22:18

Invalid Host header 报错

webpack 构建项目,笔都希望设置 hosts ,利用特定的自定义域名浏览启动的项目,利用 hostname。

// hosts 设置
127.0.0.1 ifrontend.test.com

验证发现可以使用,但是页面提示 “Invalid Host header”

新版的 webpack-dev-server 修改了一些东西,默认检查hostname。如果hostname不是配置内的,将不可访问。

webpack-dev-server: v1.16.4

解决方法

devServer: {
  disableHostCheck: true
}

或者

devServer: {
  public: 'ifrontend.test.com'
}

devServer 还有很多其它常用的配置项,比如:

  • devServer.https

默认情况下,开发服务器将通过 HTTP 提供服务。可以选择使用 HTTPS 提供服务:

devServer: {
  https: true
}

上述代码使用自签名,当然也可以提供自己的证书

module.exports = {
  devServer: {
    https: {
      ca: './path/to/server.pem',
      pfx: './path/to/server.pfx',
      key: './path/to/server.key',
      cert: './path/to/server.crt',
      passphrase: 'webpack-dev-server',
      requestCert: true,
    },
  },
};

免费证书的申请,名大云服务商都是免费申请流程,比较简单,就不展开讲了

腾讯云:https://cloud.tencent.com/document/product/400/6814

阿里云:https://developer.aliyun.com/article/759071?spm=5176.21213303.J_6704733920.7.4a483edapm0Goe&scm=20140722.S_community%40%40%E6%96%87%E7%AB%A0%40%40759071._.ID_community%40%40%E6%96%87%E7%AB%A0%40%40759071-RL_https%E5%85%8D%E8%B4%B9%E8%AF%81%E4%B9%A6%E7%94%B3%E8%AF%B7-OR_main-V_2-P0_0

  • devServer.headers

为所有响应添加 headers:

除了键值对,还支持数组、函数格式

module.exports = {

  devServer: {
    headers: {
      'X-Custom-host': 'www.ifrontend.net',
    },
  },
};
  • devServer.open

告诉 dev-server 在服务器已经启动后打开浏览器。设置其为 true 以打开你的默认浏览器。

module.exports = {

  devServer: {
    open: true
  }
}

也可以打开指定页面

module.exports = {

  devServer: {
    open: ['/about'],
  }
}

打开多个指定页面

module.exports = {

  devServer: {
    open: ['/about', '/contactUs']
  }
}

也可以指定浏览器打开,而非使用系统默认浏览器打开

module.exports = {

  devServer: {
    open: {
      target: ['first.html', 'http://ifrontend.test.com:8080/second.html'],
      app: {
        name: 'google-chrome',
        arguments: ['--incognito', '--new-window']
      }
    }
  }
}
  • devServer.host

指定host

  • devServer.port

指定端口

  • devServer.hot

指定热更新

  • devServer.proxy

api 代理启动,解决项目 api 联调跨域

module.exports = {

  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
}
  • evServer.static

该配置项允许配置从目录提供静态文件的选项(默认是 ‘public’ 文件夹)。将其设置为 false 以禁用:

module.exports = {

  devServer: {
    static: ['assets']
  }
}
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。