Safari无法识别.htaccess图片重写规则的问题求助

Let's break down why Safari is refusing to show your rewritten images and fix it step by step.

The Core Issue #

Safari is stricter than Chrome when it comes to matching the requested resource's file extension with the response's Content-Type header. Your PHP script returns the original image's MIME type (e.g., image/jpeg for a JPG source) when the browser requests bg.png—Safari sees this mismatch and blocks the image from rendering. Additionally, your caching rules have overlaps that might confuse Safari's cache handling.

Step 1: Fix Content-Type Mismatch #

Update your PHP script to ensure it returns an image/png Content-Type and converts all source images to PNG format before outputting. This aligns with the requested .png extension, which Safari requires:

<?php
$imagesDir = 'img/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

if (empty($images)) {
    header($_SERVER["SERVER_PROTOCOL"] . " 404 Not Found");
    exit;
}

$randomImage = $images[array_rand($images)];

if (file_exists($randomImage)) {
    // Get source image details
    $imageInfo = getimagesize($randomImage);
    $sourceMime = $imageInfo['mime'];

    // Create image resource based on source type
    switch ($sourceMime) {
        case 'image/jpeg':
            $sourceImage = imagecreatefromjpeg($randomImage);
            break;
        case 'image/png':
            $sourceImage = imagecreatefrompng($randomImage);
            imagealphablending($sourceImage, true);
            imagesavealpha($sourceImage, true);
            break;
        case 'image/gif':
            $sourceImage = imagecreatefromgif($randomImage);
            break;
        default:
            header($_SERVER["SERVER_PROTOCOL"] . " 404 Not Found");
            exit;
    }

    // Set correct PNG headers
    header('Content-Type: image/png');
    header('Cache-Control: max-age=0, no-cache, no-store, must-revalidate');
    header('Pragma: no-cache');
    header('Expires: Wed, 11 Jan 1984 05:00:00 GMT');

    // Output as PNG
    imagepng($sourceImage);
    imagedestroy($sourceImage);
} else {
    header($_SERVER["SERVER_PROTOCOL"] . " 404 Not Found");
}
?>

Step 2: Clean Up .htaccess Rules #

Simplify your caching rules to avoid conflicts and remove unnecessary directives:

RewriteEngine On
RewriteBase /directory/to/dynamic_image

# Rewrite bg.png to bg.php (add [L] to stop processing further rules)
RewriteRule ^bg\.png$ bg.php [L]

# Strict cache rules ONLY for bg.png
<Files "bg.png">
    FileETag None
    Header unset ETag
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
    # Tell browsers the response varies based on accept headers
    Header set Vary "Accept"
</Files>

# Global cache rules for static assets (avoid affecting dynamic scripts)
<IfModule mod_headers.c>
    <FilesMatch "\.(jpg|jpeg|png|gif|css|js)$">
        Header set Cache-Control "no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires 0
    </FilesMatch>
</IfModule>

# Remove the unused AddHandler (it's for .jpeg files, not your .png rewrite)
# AddHandler application/x-httpd-php .jpeg

Key Fixes Explained #

1. Content-Type Alignment: By converting all source images to PNG and setting Content-Type: image/png, we eliminate the extension-MIME mismatch that Safari blocks.
2. Targeted Cache Rules: We restrict strict cache-disabling to bg.png instead of applying it globally, reducing conflicts.
3. RewriteRule [L] Flag: Ensures Apache stops processing rules after rewriting bg.png, preventing unexpected behavior.
4. Vary Header: Helps Safari understand that the response might differ based on client accept headers, improving cache handling.

Additional Troubleshooting Tips #

• Open Safari's Developer Tools (Cmd+Opt+I), go to the Network tab, and check the bg.png response:
  • Verify the Content-Type is image/png
  • Confirm the status code is 200 (not 404 or 500)
  • Check for any error messages in the Console tab
• Force a hard refresh in Safari (Cmd+Shift+R) to clear any cached bad responses
• Check your server error logs for PHP execution issues with bg.php

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