HSTS阻止Firefox访问本地Angular开发服务器的问题如何解决？

• 你使用的dev.mydomain.com域名之前曾返回过HSTS响应头，已经被Firefox永久缓存，规则要求该域名所有访问必须使用受信任的有效HTTPS证书，不允许用户手动跳过安全告警
• 当前Angular dev-server默认使用的自签名证书不属于浏览器信任的有效证书，因此触发HSTS拦截，之前使用grunt-connect未触发是因为该服务默认不会携带HSTS响应头，且你之前访问该域名的场景没有缓存HSTS规则

方案1：配置本地受信任的HTTPS证书（最优解） #

该方案完全符合项目强制HTTPS的要求，不需要修改浏览器安全规则，也不会破坏HSTS机制：

1. 使用本地证书生成工具生成本地信任的dev.mydomain.com域名证书，生成后你会得到公钥pem文件和私钥key文件
2. 修改angular.json的serve配置，新增证书路径参数：

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "myClientProject:build",
    "proxyConfig": "./config/angular-proxy.conf.ts",
    "port": 9006,
    "host": "dev.mydomain.com",
    "deployUrl": "",
    "ssl": true,
    // 新增两行，替换为你本地生成的证书实际路径
    "sslCert": "./ssl/dev.mydomain.com.pem",
    "sslKey": "./ssl/dev.mydomain.com-key.pem"
  }
}

3. 重启dev-server后访问即可正常加载，不会触发HSTS拦截

方案2：强制dev-server禁用HSTS响应头 #

如果你不想维护本地证书，可以通过配置让开发服务返回禁用HSTS的头，覆盖浏览器之前的缓存规则：

1. 找到你的custom-webpack对应的自定义webpack配置文件，添加如下devServer配置段：

module.exports = {
  // 其他现有webpack配置保持不变
  devServer: {
    headers: {
      'Strict-Transport-Security': 'max-age=0'
    }
  }
}

2. 清除Firefox中已缓存的HSTS规则：打开Firefox设置→隐私与安全→站点安全设置，搜索dev.mydomain.com后删除对应记录
3. 重启dev-server后重新访问即可

方案3：更换本地开发域名（临时快速绕过） #

你可以修改本地hosts文件，新增一条未使用过的本地域名映射，比如127.0.0.1 dev-local.mydomain.com，然后将angular.json中的host字段改为dev-local.mydomain.com，该域名没有HSTS缓存记录，直接访问即可正常添加自签名证书例外。

@angular-builders/custom-webpack:dev-server本身完全兼容原生webpack-dev-server的所有配置项，你可以直接将webpack-dev-server的参数写在两个位置：

• 直接放在angular.json的serve.options字段下
• 放在自定义webpack配置的devServer字段下
  两种配置会自动合并生效，不需要额外的转换操作。

内容的提问来源于stack exchange，提问作者DavidA