Cross Origin Request Error (CORS)

A Cross-Origin Request (CORS) error occurs when a web page on one domain tries to load resources (fonts, scripts, API data, images) from a different domain, and the server hosting those resources hasn't explicitly allowed it. This is a browser security feature, not a server error. The fix is to add the correct CORS headers on the server serving the resource.

Header set Access-Control-Allow-Origin "*"

01. What Is CORS

Cross-Origin Resource Sharing is a security mechanism built into web browsers. By default, browsers block web pages from making requests to a different domain than the one serving the page. This is called the "same-origin policy" and it prevents malicious sites from reading data from other sites you're logged into.

CORS provides a controlled way to relax this restriction. The server hosting the resource sends HTTP headers telling the browser which other domains are allowed to access it. Without these headers, the browser blocks the request.

Key concept: the CORS headers must be set on the server providing the resource, not on the server making the request. If siteA.com tries to load a font from siteB.com, the CORS header must be on siteB.com.

02. Common CORS Error Messages

These all mean the same thing - the resource server isn't sending CORS headers:

Chrome: "Access to XMLHttpRequest at 'https://...' from origin 'https://...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Firefox: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource."

Safari: "Origin https://... is not allowed by Access-Control-Allow-Origin."

03. Fixing CORS via .htaccess

The simplest fix is to add CORS headers to the .htaccess file on the server hosting the resource:

Allow All Domains

Header set Access-Control-Allow-Origin "*"

This allows any website to load your resources. Appropriate for public assets like fonts, images, and public API endpoints.

Allow All Domains with Full Headers

For API endpoints that use custom headers or non-simple HTTP methods:

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"
</IfModule>

Limit to Specific File Types

If you only want to allow CORS on fonts and images (not your entire site):

<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font\.css|css|js|gif|png|jpe?g|svg|svgz|ico|webp)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

04. Allowing Specific Domains

For better security, allow only the specific domain that needs access instead of using the wildcard *:

Header set Access-Control-Allow-Origin "https://www.yourothersite.com"

<IfModule mod_headers.c>
SetEnvIf Origin "^https://(www\.siteA\.com|www\.siteB\.com)$" CORS_ORIGIN=$0
Header set Access-Control-Allow-Origin "%{CORS_ORIGIN}e" env=CORS_ORIGIN
Header set Vary "Origin"
</IfModule>

This checks the incoming Origin header against a list of allowed domains and only sends the CORS header if there's a match. The Vary: Origin header is important for caching - it tells CDNs and proxies that the response varies depending on the requesting origin.

05. Font Loading CORS Issues

Font files are the most common trigger for CORS errors. This happens when:

Your CSS is on a CDN - Your stylesheet loads from a CDN (like Cloudflare or CloudFront) and references font files on your origin server. The CDN domain doesn't match your server domain.

You're serving fonts from a subdomain - Fonts on cdn.yourdomain.com loaded by a page on www.yourdomain.com.

Font Awesome or Google Fonts - Usually these services set their own CORS headers, but if you're self-hosting a copy, you need to add the headers yourself.

Fix: add the CORS header specifically for font files as shown in the FilesMatch example above.

If you're using Cloudflare, you may need to purge the Cloudflare cache after adding CORS headers so the cached responses include the new headers.

06. WordPress and CORS

WordPress REST API requests from external sites will be blocked by CORS unless you add headers. If you're building a headless WordPress setup or allowing other sites to consume your REST API:

Add this to your theme's functions.php:

add_action('rest_api_init', function() {
    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
    add_filter('rest_pre_serve_request', function($value) {
        header('Access-Control-Allow-Origin: https://yourfrontend.com');
        header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
        header('Access-Control-Allow-Headers: Content-Type, Authorization');
        return $value;
    });
});

Replace https://yourfrontend.com with the domain that needs API access, or use * for public APIs.

07. API and AJAX CORS

For custom PHP API endpoints, add CORS headers at the top of your PHP script:

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');

// Handle preflight OPTIONS request
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit();
}

// Your API logic here
?>

The preflight handler is important: browsers send an OPTIONS request before certain cross-origin requests to check if the server allows them. Without handling this, your API will reject preflight requests and the actual request will never be sent.

Quick Recap: Fixing CORS Errors

1. Add headers on the right server - CORS headers go on the server hosting the resource, not the one requesting it
2. Start with wildcard - Use Access-Control-Allow-Origin: * to confirm the fix, then restrict if needed
3. Use FilesMatch for fonts - Limit CORS headers to specific file types for better security
4. Handle preflight - Respond to OPTIONS requests for APIs that use custom headers
5. Clear CDN cache - Purge cached responses after adding CORS headers

Last updated March 2026 · Browse all General articles