网站图片、字体、favicon仅在Safari显示，Chrome及移动端无法加载如何解决？

核心问题说明 #

你遇到的Safari正常加载、Chrome字体+图片异常、移动端仅图片异常的表现，属于典型的不同浏览器静态资源校验规则差异导致的问题，按以下步骤逐一排查即可定位：

排查步骤 #

• 优先排查CORS配置 #

  首先确认你的服务端给静态资源返回的响应头中包含正确的Access-Control-Allow-Origin配置，Safari对跨域静态资源的校验规则远宽松于Chrome，未配置跨域头时经常出现Safari正常加载、Chrome直接拦截的情况。重点检查svg、woff、woff2、ttf这类资源的跨域头是否单独配置。

• 检查资源路径与MIME类型配置 #

  1. 确认你提到的左上角SVG资源https://dikril.viliworld.eu/Archive/images/Dikril-white-print.svg的服务端文件路径、文件名大小写和代码中引用的完全一致，Chrome和移动端浏览器对路径大小写的敏感度远高于Safari，尤其是服务端部署在Linux系统时大小写不匹配会直接返回404
  2. 确认服务端配置的SVG MIME类型为image/svg+xml，如果配置错误（如误写为text/plain）会导致Chrome和移动端拒绝识别加载

• 检查CSP安全头配置 #

  如果你给站点配置了Content-Security-Policy安全响应头，确认规则中已放开本站静态资源的加载权限，不同浏览器对CSP规则的容错性不同，容错度低的浏览器会直接拦截不符合规则的资源。

• 移动端单独排查点 #

  1. 确认服务端没有针对移动端UA做特殊的资源路由/拦截规则，避免误拦截图片请求
  2. 排查SVG文件本身是否存在语法错误、是否嵌入了未授权的外部引用，移动端Webview对SVG语法的校验比桌面端更严格，微小的语法错误就可能导致加载失败。

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