React开发：如何让Chrome允许自定义本地域名的HTTP访问

问题背景 #

我在create-react-app中开发简易明暗模式切换功能，

return (<App />)

const [darkMode, setDarkMode] = useState<boolean>(() => {
  const storedDarkMode: string | undefined = Cookies.get('my_dark_mode');
  console.log(storedDarkMode);

  if (storedDarkMode !== undefined) {
    return JSON.parse(storedDarkMode);
  } else if (
    window.matchMedia &&
    window.matchMedia('(prefers-color-scheme: dark)').matches
  ) {
    return true;
  } else {
    return false;
  }
});

const toggleDarkMode = () => {
  setDarkMode((prev) => !prev);
};

useEffect(() => {
  if (darkMode) {
    document.body.classList.add('dark-mode');
  } else {
    document.body.classList.remove('dark-mode');
  }
  Cookies.set('ap_dark_mode', JSON.stringify(darkMode), {
    domain: 'myname.dev',
  });
}, [darkMode]);

本地配置 #

• /etc/hosts配置：

127.0.0.1 localhost.myname.dev

已执行sudo dscacheutil -flushcache并重启电脑。

• React项目.env.development配置：

HOST=localhost.myname.dev
PORT=3000

问题现象 #

通过npm run start启动开发服务器后，终端显示可访问http://localhost.myname.dev:3000，但实际访问时Chrome自动将HTTP请求转为HTTPS。我暂不想配置HTTPS，仅希望Chrome允许HTTP请求。

已尝试无效的操作 #

• 在chrome://net-internals/#hsts的Delete选项输入localhost.myname.dev，无效果
• 清除浏览器缓存

截图显示Chrome地址栏自动将http替换为https，并提示“您与此网站建立的连接不安全”。

解决方法 #

1. 禁用Chrome的HTTPS自动升级 #

打开Chrome地址栏输入chrome://flags/#auto-upgrade-to-https，将“Auto-Upgrade to HTTPS”选项设置为Disabled，重启Chrome后再访问目标地址。

2. 删除父域名的HSTS缓存 #

Chrome可能缓存了顶级域名myname.dev的HSTS规则，而非仅子域名：

1. 打开chrome://net-internals/#hsts
2. 在“Delete domain”输入框中填写myname.dev
3. 点击“Delete”按钮，之后重新访问

3. 启动Chrome时添加参数绕过（临时方案） #

适用于临时开发场景，macOS终端执行以下命令启动Chrome：

open -a "Google Chrome" --args --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://localhost.myname.dev:3000

⚠️ 注意：此方法仅用于本地开发，不要用于日常浏览。

4. 更换非强制HTTPS的域名后缀 #

.dev是被浏览器默认强制HTTPS的顶级域名，建议改用.test或.local：

1. 修改/etc/hosts为：

127.0.0.1 localhost.myname.test

2. 修改.env.development的HOST为：

HOST=localhost.myname.test

3. 重启开发服务器，访问http://localhost.myname.test:3000

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