跨域引用图片遇CORS错误及后续加载异常求助

以下是针对问题的具体排查和解决步骤：

• 检查浏览器网络请求详情
  打开浏览器开发者工具的「Network」面板，定位到该图片的请求：

  • 确认HTTP状态码为200（正常响应），排除404/403等资源访问错误
  • 查看「Response Headers」，确认Content-Type为对应图片格式的MIME类型（如image/png），避免服务器返回错误的内容类型（比如text/html）
  • 验证Access-Control-Allow-Origin: *等CORS头确实存在，确保根目录的.htaccess规则生效到了图片所在的子目录

• 排查图片元素的样式问题
  右键图片选择「检查」，查看「Computed」样式：

  • 确认display不为none、visibility不为hidden
  • 检查width和height是否为非零值，避免元素被缩至不可见
  • 排除opacity: 0、filter: opacity(0)等隐藏类样式

• 清除浏览器缓存
  用快捷键Ctrl+Shift+R强制刷新页面，或使用无痕模式访问，避免浏览器缓存了之前加载失败的请求记录

• 检查服务器防盗链配置
  部分服务器会设置Referer防盗链规则，即使CORS允许也会拒绝指定域名的引用：

  • 查看example1.com根目录或图片目录下的.htaccess，是否存在RewriteRule相关的防盗链规则
  • 在Network面板的「Request Headers」中查看Referer字段，确认是否被服务器策略拦截

• 测试极简场景
  新建仅包含该图片标签的HTML文件，上传至example2.com测试，排除页面其他JS、CSS代码的干扰：

  <!DOCTYPE html>
  <html>
  <body>
  <img src="https://example1.com/imaginaryPath/guest.png" alt="Guest">
  </body>
  </html>
  

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