CORS error on same origin -- trailing slash or port mismatch

CORS error even though frontend and backend appear to be on the same domain. The request looks same-origin but the browser blocks it.

Origin includes scheme + host + port. These are ALL different origins: (1) http vs https (scheme). (2) example.com vs www.example.com (subdomain). (3) localhost:3000 vs localhost:4000 (port). (4) localhost vs 127.0.0.1 (different hostnames!). Also check: trailing slash redirect creates cross-origin. Reverse proxy may rewrite origin header. Fix: configure CORS on server for the exact frontend origin, or use a proxy in dev (Vite/Next.js proxy config).

The Same-Origin Policy compares exact origin strings (protocol + host + port). Any difference, even cosmetic ones like localhost vs 127.0.0.1, makes it cross-origin.