本地浏览器SCSS字体加载报404，调整路径/Vite Origin后仅本地生效

问题场景 #

• 本地开发时，SCSS中使用相对路径加载字体（如下代码），所有浏览器均返回404错误，但该代码在其他机器可正常运行：

// styles.scss
@font-face {
  font-family: 'Roboto-Bold';
  src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
  font-family: 'Roboto-Medium';
  src: url('../fonts/Roboto-Medium.ttf');
}

@font-face {
  font-family: 'Roboto-Regular';
  src: url('../fonts/Roboto-Regular.ttf');
}

• 改用项目根目录绝对路径后，本地可正常加载字体，但其他机器失效：

// styles.scss
@font-face {
  font-family: 'Roboto-Bold';
  src: url('./src/assets/fonts/Roboto-Bold.ttf');
}

@font-face {
  font-family: 'Roboto-Medium';
  src: url('./src/assets/fonts/Roboto-Medium.ttf');
}

@font-face {
  font-family: 'Roboto-Regular';
  src: url('./src/assets/fonts/Roboto-Regular.ttf');
}

• 已排除字体文件损坏、路径拼写错误等问题，将vite.config.ts中的origin从http://0.0.0.0:8000改为http://127.0.0.1:8000后，相对路径加载字体恢复正常。

原因分析 #

1. 0.0.0.0与127.0.0.1的访问上下文差异

   • 0.0.0.0是通配监听地址，会绑定本地所有可用网络接口（包括回环地址、局域网IP等）；而127.0.0.1仅指向本地回环接口。
   • 当Vite以0.0.0.0为origin时，浏览器可能会通过局域网IP访问项目，此时字体相对路径的解析依赖于当前页面的基准URL（即局域网IP地址），但Vite的资源映射是基于项目文件结构的，两者上下文不匹配就会导致资源找不到，返回404。
   • 改用127.0.0.1后，页面基准URL固定为本地回环地址，资源请求的上下文与Vite的资源映射完全对齐，相对路径解析逻辑正常，因此字体能正确加载。

2. Vite资源解析与origin配置的绑定关系

   • Vite在开发模式下会基于origin配置生成资源的绝对URL。当origin设为0.0.0.0时，Vite无法精准判断客户端的实际访问地址，生成的字体资源URL可能与浏览器实际请求路径不匹配，导致404。
   • 部分浏览器对0.0.0.0作为资源请求基准地址的解析逻辑存在特殊性，会错误解析相对路径，进而触发资源未找到的错误。

3. 本地与其他机器的网络环境差异

   • 其他机器可能默认以127.0.0.1访问项目，或者其网络接口优先级、浏览器设置与你的本地环境一致，因此0.0.0.0模式下资源解析正常；而你的本地环境可能存在网络接口优先级调整、浏览器缓存残留等情况，导致0.0.0.0模式下出现异常。

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