CORS error after deploying

The browser console says blocked by CORS policy — the API works when you call it directly, but the frontend can't.

The symptom

After deploying, the browser console shows something like:

Access to fetch at 'https://your-api.dockhold.app/items'
from origin 'https://your-app.dockhold.app' has been blocked by
CORS policy: No 'Access-Control-Allow-Origin' header is present.

The API itself is fine — hitting it directly works. Only the browser, calling from your frontend, is blocked.

Why it happens

Browsers block a page from calling a different origin (domain) unless the server explicitly allows that origin. Locally, everything shares localhost, so either there was no cross-origin call or your CORS config allowed http://localhost. Deployed, your frontend and API are on different URLs, and the API isn't allowing the frontend's new origin.

The fix

Tell the API to allow your deployed frontend's origin, and read that origin from an environment variable so it's not hardcoded.

Node / Express

const cors = require("cors");

app.use(cors({
  origin: process.env.FRONTEND_ORIGIN, // e.g. https://your-app.dockhold.app
}));

Python / FastAPI

import os
from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=[os.environ["FRONTEND_ORIGIN"]],
    allow_methods=["*"],
    allow_headers=["*"],
)

Set FRONTEND_ORIGIN in the dashboard to your frontend's full URL — scheme included (https://...), no trailing slash. To allow more than one origin (say a custom domain too), read a comma-separated list and split it.

Avoid it entirely

If your frontend and backend are the same app, serve them from one origin and call the API with a relative path (fetch("/api/items")) — same origin, no CORS at all. See the Next.js recipe for a single-app frontend + API.

Related

• Hardcoded localhost URL
• Missing environment variables
• All troubleshooting