Why My API Works in Postman but Not in Browser — Complete Debugging Guide

You test your API in Postman — works perfectly. You paste the same URL into JavaScript — and it crashes. This is one of the most common frustrations in web development, and it has a handful of well-known root causes. This guide covers every one of them with working fixes.

Postman is a native application or browser extension that sends requests directly, without any browser security model applied. Your browser, on the other hand, enforces several security policies that Postman blissfully ignores.

CORS is by far the most common culprit. The browser checks whether the server explicitly permits requests from your frontend's origin (scheme + host + port). If the server doesn't include the right response headers, the browser blocks the response — even if the server returned 200 OK.

The fix is always server-side. Add the correct response headers:

Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true   # only if you send cookies

Here's how to set this in common backend frameworks:

const cors = require('cors');

app.use(cors({
  origin: 'https://myapp.com',      // your frontend origin
  methods: ['GET','POST','PUT','DELETE'],
  allowedHeaders: ['Content-Type','Authorization'],
  credentials: true,                 // only if using cookies
}));

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
  CORSMiddleware,
  allow_origins=["https://myapp.com"],
  allow_credentials=True,
  allow_methods=["*"],
  allow_headers=["*"],
)

For any request with a custom header (like Authorization) or a non-GET/POST method, the browser first sends a silent OPTIONS preflight to ask the server for permission. If the server doesn't handle OPTIONS, it returns 405 Method Not Allowed, and the real request never fires.

# Server ignores OPTIONS — preflight fails
app.post('/api/data', handler)
# No OPTIONS route defined

# Express: cors() handles OPTIONS automatically
app.use(cors(corsOptions));

# Or manually:
app.options('*', cors(corsOptions));  // enable preflight for all routes
app.post('/api/data', cors(corsOptions), handler);

Postman lets you manually attach any header. The browser's fetch() API requires you to explicitly include credentials in your code. A missing Authorization header is the second most common issue after CORS.

// Auth header forgotten — server returns 401
fetch('https://api.example.com/data')
  .then(res => res.json())

// Include Authorization header explicitly
const token = localStorage.getItem('token');

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json',
  },
})
  .then(res => res.json())

By default, fetch() does not send cookies. You must opt in withcredentials: 'include'. The server must also explicitly allow credentials in its CORS headers, and the cookie must meet SameSite requirements.

// Cookies not sent — session breaks
fetch('/api/user/profile')
  .then(res => res.json())

// Send cookies with every request
fetch('/api/user/profile', {
  credentials: 'include',   // sends cookies
})
  .then(res => res.json())

// Server must respond with:
// Access-Control-Allow-Credentials: true
// Access-Control-Allow-Origin: https://myapp.com (exact, no wildcard)

If your frontend is served over HTTPS but your API is HTTP, the browser blocks the request entirely. This is called mixed content and is a security protection — not a bug.

const API = process.env.NEXT_PUBLIC_API_URL || "https://api.example.com";

Sending a JSON body without Content-Type: application/json causes the server to misread the body. This makes the request fail on the server side, while it worked in Postman because Postman auto-sets it.

// Body is sent as plain text — server can't parse it
fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'Alice', age: 30 }),
})

// Correct: tell the server you're sending JSON
fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`,
  },
  body: JSON.stringify({ name: 'Alice', age: 30 }),
})

During local development, you can use a proxy to avoid CORS entirely by making the browser think the API is on the same origin:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:8000/:path*', // your backend
      },
    ];
  },
};

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, ''),
      },
    },
  },
};