局域网其他设备访问XAMPP站点仅加载部分CSS、资源404如何解决

核心问题原因 #

你本地运行环境为Windows系统，可兼容识别反斜杠\作为路径分隔符，但Web服务器和浏览器遵循标准Web路径规范，仅支持正斜杠/作为路径分隔符，混用分隔符会导致局域网访问时路径解析失败，触发404错误。

具体修改步骤 #

• 统一所有资源路径的分隔符为正斜杠/
  原有错误路径修改示例：
  • 样式路径\training_guide\Public\css\bootstrap.css修改为/training_guide/Public/css/bootstrap.css
  • 样式路径..\Public\styles.css修改为../Public/styles.css
  • 其余所有使用反斜杠的链接、资源路径全部按上述规则替换
• （推荐）统一使用站点根相对路径
  为避免不同层级页面跳转时相对路径计算错误，所有路径统一以站点根目录前缀/training_guide/开头，示例：
  Pages目录下的页面引用Public资源，直接写/training_guide/Public/css/bootstrap.css，无需根据当前页面层级调整../的层数
• 检查默认首页配置
  确认Apache配置文件httpd.conf中DirectoryIndex参数已包含你站点的首页文件名（如index.html、index.htm），如果需要开启目录列表访问，可在对应Directory规则中添加Options +Indexes配置
• 验证生效
  修改完成后清除浏览器缓存，分别在本地和局域网设备重新访问测试即可。

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