同一端口HTTPS应用加载HTTP缓存字体触发混合内容错误求助

数据老陈

2026-6-21

解决HTTPS应用混合内容字体请求错误的方案

问题根源

虽然你确认HTTPS应用未引入目标字体，但浏览器的Service Worker缓存、Vite开发缓存，或是未彻底清理的浏览器磁盘缓存残留，导致旧的HTTP资源请求被触发，进而引发混合内容拦截。

修复步骤

清除浏览器Service Worker缓存
打开Chrome开发者工具（F12），切换到「Application」标签，左侧找到「Service Workers」，勾选「Update on reload」，点击当前域名下的「Unregister」按钮，刷新页面确认清除。
清理Vite开发缓存
关闭当前Vite服务，删除项目根目录下的.vite文件夹（Vite的开发缓存目录），重新启动HTTPS应用，让Vite重新构建所有资源。
强制浏览器彻底刷新
按下Ctrl + Shift + R（Windows/Linux）或Cmd + Shift + R（Mac），强制绕过缓存加载页面。
优化Vite配置
给vite.config.ts的server配置添加strictPort: true，确保端口被完全占用，避免旧HTTP进程残留；同时补充loadEnv的导入（你的配置里漏了），修正后的配置如下：

import { defineConfig, loadEnv } from 'vite' // 补充导入
import react from '@vitejs/plugin-react'
import basicSsl from '@vitejs/plugin-basic-ssl'

export default (mode: string) => {
  process.env = {...process.env, ...loadEnv(mode, process.cwd())};
  return defineConfig({
    plugins: [react(), basicSsl()],  
    server: {
      port: parseInt(process.env.VITE_PORT as string),
      host: true,
      strictPort: true // 新增：强制占用端口，冲突时直接报错
    },
  });
}