Learn CORSErrorsTesterFrameworksQuizSearch

CORS Origin Mismatch: Compare Scheme, Host and Port

By Ankit Jain · Updated

Compare the request Origin with Access-Control-Allow-Origin exactly. Separate a browser CORS mismatch from Google OAuth origin_mismatch.

Browser message

Typical wording varies by browser:

The Access-Control-Allow-Origin value does not match the supplied origin.

What it means

The API returned permission for a different origin. An origin consists of scheme, hostname, and effective port; it contains no path or trailing slash.

Evidence to inspect

Compare the Origin request header with Access-Control-Allow-Origin on the response. https://app.example.com and http://app.example.com differ. localhost and 127.0.0.1 differ. Ports 3000 and 5173 differ.

Smallest safe fix

Add the intended frontend origin to a server-side allowlist. For multiple approved origins, return only the matching origin for each response, with Vary: Origin. Never return a comma-separated list in Access-Control-Allow-Origin.

Example permission for an approved request (not a complete API policy):

Origin: http://localhost:5173

Access-Control-Allow-Origin: http://localhost:5173
Vary: Origin

If the response varies by origin, ensure the CDN respects Vary or a suitable cache key. Cached permission for a different frontend can cause intermittent failures.

Verify the fix

Repeat from each approved origin and from an unapproved origin. Only approved origins should receive permission. Compare the response after any proxy or CDN, not just your application logs.

Use the CORS Tester to inspect public API headers or analyze a captured response. Confirm the result from the actual frontend afterward.

Continue learning

What counts as an origin · Framework configuration · All errors

Is this Google OAuth origin_mismatch?

An OAuth sign-in page reporting origin_mismatch is a different configuration error. Check the OAuth web client’s authorized JavaScript origins for the exact page origin. A redirect URI setting is separate. Adding CORS headers to your API will not fix the OAuth client’s authorized-origin configuration. Confirm which service produced the message before changing your API policy.

References