PHP花店脚本跨域读取阻塞（CORB）问题求助

1. 检查图片的Content-Type响应头 #

浏览器加载图片时，服务器必须返回匹配的Content-Type（如image/jpeg、image/png）。若返回text/html等非图片类型头部，会触发CORB。

• 用浏览器开发者工具（F12）的网络面板，查看图片请求的Content-Type字段是否正确。
• 修复方式：
  • Apache：在images/products目录下创建.htaccess文件，添加规则：

    AddType image/jpeg .jpg .jpeg
    AddType image/png .png
    AddType image/gif .gif
    

  • Nginx：在配置文件中添加：

    location ~* \.(jpg|jpeg|png|gif)$ {
        types {
            image/jpeg jpg jpeg;
            image/png png;
            image/gif gif;
        }
    }
    

2. 配置跨域资源共享（CORS） #

如果前台网站与后台面板是不同域名（比如前台seydisehircicekci.com、后台admin.seydisehircicekci.com），需后台服务器配置CORS允许前台访问图片：

• Apache：在后台根目录的.htaccess中添加：

  Header set Access-Control-Allow-Origin "https://seydisehircicekci.com"
  Header set Access-Control-Allow-Methods "GET, OPTIONS"
  Header set Access-Control-Allow-Headers "Content-Type"
  

  替换为实际前台域名，生产环境不建议用*允许所有域名。
• Nginx：在后台server配置中添加：

  add_header Access-Control-Allow-Origin "https://seydisehircicekci.com";
  add_header Access-Control-Allow-Methods "GET, OPTIONS";
  add_header Access-Control-Allow-Headers "Content-Type";
  

3. 验证图片路径与文件存在性 #

若图片路径错误，服务器返回404页面（text/html类型）也会触发CORB：

• 直接在浏览器地址栏输入图片完整URL，确认能否正常显示。
• 代码中添加调试，检查生成的路径：

  $imgUrl = 'https://admin.seydisehircicekci.com/images/products/' . $getImage['img'];
  echo '<!-- 调试：图片路径 ' . htmlspecialchars($imgUrl) . ' -->';
  

  查看页面源代码，确认路径是否正确，同时检查后台上传的图片是否确实保存在对应目录。

4. 优化HTML拼接方式（减少错误） #

直接用echo拼接HTML易出现转义或拼接错误，改用HEREDOC/输出缓冲让代码更清晰：

$getProducts = getProductsIndex();
foreach($getProducts as $a) {
   $product_id = $a['id'];
   $getImageQuery = $db->query("SELECT * FROM product_imgs WHERE product = '$product_id' ORDER BY id DESC LIMIT 1");
   $getImage = $getImageQuery->fetch();
   $imgUrl = 'https://admin.seydisehircicekci.com/images/products/' . $getImage['img'];
   $productLink = 'urun?value=' . encrypt($product_id);
   ?>
   <div class="shop-item col-lg-4 col-md-4 col-sm-12">
      <div class="inner-box">
         <div class="image">
            <a href="<?= $productLink ?>" style="display: inline-block; width: 305px; height: 285px;">
               <img src="<?= htmlspecialchars($imgUrl) ?>" alt="Ürün Görseli" style="width: 100%; height: 100%;" />
            </a>
         </div>
         <div class="lower-content">
            <h6><a href="<?= $productLink ?>"><?= htmlspecialchars($a['name']) ?></a></h6>
            <div class="d-flex justify-content-between align-items-center">
               <div class="price">₺ <?= htmlspecialchars($a['price']) ?></div>
            </div>
         </div>
      </div>
   </div>
   <?php
}

同时用htmlspecialchars()避免XSS风险。

5. 清除浏览器缓存 #

若之前错误响应被缓存，即使修复后仍会触发CORB：

• 按Ctrl+Shift+R强制刷新页面。
• 在开发者工具网络面板勾选“禁用缓存”后重新测试。

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