如何避免请求被强制升级为HTTPS？Express/React/Vite部署问题

问题原因 #

你遇到的情况确实是浏览器近期安全更新导致的——主流浏览器（如Chrome、Firefox）现在默认会在部分场景下强制启用HTTPS升级：比如开启了「HTTPS优先/仅使用HTTPS」全局功能，或是浏览器缓存了该IP地址的HTTPS强制规则时，会自动将页面内的HTTP请求重定向为HTTPS，即使index.html里的资源链接明确写的是HTTP协议。

解决步骤 #

1. 关闭浏览器的HTTPS强制升级功能 #

• Chrome/Edge：打开设置 → 隐私和安全 → 安全，找到「HTTPS 优先」选项，选择「仅在可能时使用HTTPS」或直接关闭。
• Firefox：打开设置 → 隐私与安全 → HTTPS-Only模式，选择「仅在专用窗口中启用」或「禁用」。

2. 清除浏览器的HSTS缓存 #

如果浏览器已经对该IP地址缓存了强制HTTPS的HSTS规则，需要手动清除：

• Chrome/Edge：在地址栏输入 chrome://net-internals/#hsts（Edge为 edge://net-internals/#hsts），在「Delete domain security policies」输入框中填写你的服务器IP地址，点击「Delete」。
• Firefox：在地址栏输入 about:config，搜索 network.stricttransportsecurity.preloadlist，将其设为false；也可通过「设置 → 隐私与安全 → 清除数据」选择「缓存Web内容」和「Cookie和站点数据」进行批量清除。

3. 确保Vite生成正确的HTTP资源链接 #

在Vite配置文件中明确指定服务器协议为HTTP，避免构建时生成模糊的资源路径：

export default defineConfig({
  plugins: [react()],
  server: {
    https: false,
    host: '0.0.0.0',
    port: 9999
  },
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name]-[hash][extname]',
        chunkFileNames: 'assets/[name]-[hash].js',
        entryFileNames: 'assets/[name]-[hash].js'
      }
    }
  }
})

重新构建并部署后，确认生成的index.html中资源链接均为HTTP协议。

4. 检查Express服务器的响应头 #

确认你的Express服务器没有设置Strict-Transport-Security响应头——这个头会强制浏览器后续对该IP使用HTTPS。如果存在类似以下代码，将其移除：

app.use((req, res, next) => {
  res.setHeader('Strict-Transport-Security', 'max-age=31536000');
  next();
});

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