如何修复WordPress子域名下的Access-Control-Allow-Origin错误

Hey, I’ve run into this exact issue with Divi and subdomains before—let’s get those icons showing again! The problem is your subdomain https://blog.site.fr isn’t allowed to fetch font files from the main domain https://www.site.fr because the required CORS header is missing. Here are a few reliable fixes:

1. Update Your .htaccess File (Apache Servers) #

This is the most straightforward method if your site uses Apache. Head to your WordPress root directory, edit the .htaccess file, and add this code before the WordPress-specific rules (like # BEGIN WordPress):

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        # Allow only your specific subdomain for security
        Header set Access-Control-Allow-Origin "https://blog.site.fr"
        # If you want to allow all subdomains, use this instead:
        # Header set Access-Control-Allow-Origin "*.site.fr"
    </IfModule>
</FilesMatch>

Save the file, clear your site cache, and reload the subdomain page. This tells the server to send the required CORS header for all font file types.

2. Use a WordPress CORS Plugin #

If you’re not comfortable editing server files, a plugin can handle this for you. Try plugins like WP CORS or Enable CORS:

• Install and activate the plugin
• Navigate to its settings page
• Add https://blog.site.fr as an allowed origin
• Specify the font file extensions (ttf, otf, eot, woff, woff2) in the allowed resources section
• Save settings and clear cache

3. Add Code to Your Theme's functions.php #

You can also inject the CORS header via WordPress hooks. Go to Appearance > Theme File Editor, open functions.php, and add this code at the bottom:

function allow_subdomain_cors_for_fonts() {
    $allowed_origin = 'https://blog.site.fr';
    // Check if the request is coming from your subdomain
    if (isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN'] === $allowed_origin) {
        // Check if the requested file is a font
        $requested_file = $_SERVER['REQUEST_URI'];
        $font_extensions = array('.ttf', '.otf', '.eot', '.woff', '.woff2');
        foreach ($font_extensions as $ext) {
            if (strpos($requested_file, $ext) !== false) {
                header("Access-Control-Allow-Origin: $allowed_origin");
                break;
            }
        }
    }
}
add_action('init', 'allow_subdomain_cors_for_fonts');

Save the changes, clear cache, and test the page.

4. Nginx Server Configuration #

If your site uses Nginx, you’ll need to edit your server block configuration instead of .htaccess. Add this inside the server block for www.site.fr:

location ~* \.(ttf|otf|eot|woff|woff2)$ {
    add_header Access-Control-Allow-Origin https://blog.site.fr;
}

Restart Nginx after making changes.

Important Notes: #

• Always back up your files (like .htaccess or functions.php) before editing them.
• Clear your browser cache and any WordPress caching plugins after applying changes—sometimes old cached responses can still cause issues.
• If you still see errors, check if your server has the mod_headers module enabled (for Apache) or that Nginx is properly configured to send custom headers.

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