Skip to content

CORS Error

Quick summary

The browser blocked your cross-origin request because the server didn't send the right CORS headers to permit it.

Why this happens

  • The API is on a different origin and doesn't send Access-Control-Allow-Origin

  • The server's CORS policy doesn't include your origin

  • Credentials mode mismatch (credentials: 'include' without proper server config)

Minimal example

✗ Broken code
// Frontend at http://app.com
fetch("http://api.com/data")  // blocked by CORS
✓ Fixed code
// Server at api.com adds:
// Access-Control-Allow-Origin: http://app.com
fetch("http://api.com/data")  // now allowed

The browser blocks the cross-origin request because api.com doesn't send CORS headers — the server must add Access-Control-Allow-Origin to permit the request.

How to diagnose

  • Check the browser console for the CORS error message

  • Inspect the response headers in the Network tab — is Access-Control-Allow-Origin present?

  • Verify the server's CORS configuration allows your origin

How to fix

  • Add CORS headers on the server (Access-Control-Allow-Origin: * or your origin)

  • Use a proxy server to make the request from the same origin

  • Fix the credentials mode to match the server configuration

How to prevent

  • Configure CORS properly on your APIs during development

  • Use same-origin requests or a proxy when possible

Related Resources

Related Glossary

Related Lessons

  • API

    Learn about APIs and cross-origin requests

  • HTTP

Related Practice

Related Tools

← Back to language