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 shareslocalhost, 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.
Don't reach for origin: "*" as a fix. A wildcard can't be combined with credentials (cookies, auth headers), and it allows any site to call your API. List the origins you actually use.
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 theNext.js recipe for a single-app frontend + API.