CORS Troubleshooting — Fixing Common Cross-Origin Errors

In this tutorial, you will learn about CORS Troubleshooting. We cover key concepts, practical examples, and best practices to help you master this topic.

CORS troubleshooting involves identifying whether the error is on the client or server side, checking response headers, and verifying preflight handling.

What You'll Learn

• How to read browser CORS error messages
• Debugging CORS with curl and browser dev tools
• Common CORS error patterns and their fixes

Why It Matters

CORS errors are among the most frustrating issues for web developers. Systematic troubleshooting saves hours of debugging time.

flowchart TD
    A["CORS Error"] --> B{"Check Browser\nConsole"}
    B --> C["Missing\nAllow-Origin"]
    B --> D["Preflight\nFailed"]
    B --> E["Credential\nError"]
    C --> F["Add Access-Control-\nAllow-Origin header"]
    D --> G["Handle OPTIONS\non server"]
    E --> H["Set Allow-Credentials:\ntrue + specific origin"]
    style A fill:#dbeafe,stroke:#2563eb

Code Examples

# Step 1: Check response headers with curl
curl -I -H "Origin: https://myapp.com" \
  -H "Access-Control-Request-Method: GET" \
  https://api.example.com/data

# Step 2: Simulate preflight
curl -X OPTIONS \
  -H "Origin: https://myapp.com" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: Content-Type" \
  https://api.example.com/data \
  -v

// Client-side debugging
fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors'
})
.then(res => {
  console.log('CORS headers:', {
    allowOrigin: res.headers.get('Access-Control-Allow-Origin'),
    allowCredentials: res.headers.get('Access-Control-Allow-Credentials')
  });
  return res.json();
})
.catch(err => console.error('CORS Error:', err));

Common Mistakes

1. Debugging Without Checking the Console

Browser CORS errors appear in the console. Always check there first.

2. Using curl Without Request Headers

Test with the same headers the browser sends (Origin, Request-Method).

3. Ignoring the Network Tab

The browser Network tab shows request and response headers for CORS analysis.

4. Forgetting to Clear Cache

Preflight responses are cached. Clear the cache after server-side CORS changes.

5. Testing Only with Localhost

Localhost has special CORS handling. Test from actual different origins.

Practice Questions

1. Where do CORS errors appear in the browser?
2. How can you test CORS without a browser?
3. What does a 404 on OPTIONS mean for CORS?
4. Why does clearing the cache help with CORS debugging?
5. What tool shows both request and response headers?

Answers:

1. Browser developer tools console (F12 > Console tab).
2. Use curl with appropriate Origin and Request-Method headers.
3. The server doesn't handle OPTIONS requests, so preflight fails.
4. Browsers cache preflight responses via Access-Control-Max-Age.
5. The Network tab in browser dev tools.

Challenge: Given a failing CORS request, trace the issue step-by-step: check the console, examine request/response headers with curl, identify the missing header, and fix the server configuration.

FAQ

What's Next

Build a CORS Mini Project to apply everything you've learned about cross-origin resource sharing.