fix: use VERCEL_URL for preview baseUrl to prevent CORS errors#360
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
VERCEL_BRANCH_URL was used as the baseUrl for preview deployments, which
Vocs injects as a <base href> tag. When visiting via the deployment-specific
URL (e.g. mpp-{hash}-tempoxyz.vercel.app), all relative fetches resolved
against the branch URL instead — causing CORS failures on /api/services
and RSC requests.
This was previously masked by Vercel Deployment Protection (password auth)
which canonicalized traffic to the branch URL. After removing password auth,
the mismatch is exposed.
Fix: prefer VERCEL_URL (matches the visited URL) over VERCEL_BRANCH_URL.
brendanjryan
force-pushed
the
fix/vercel-preview-cors
branch
from
dc66423 to
901f8d3
Compare
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 901f8d3e6f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`; | ||
| if (process.env.VERCEL_BRANCH_URL) | ||
| return `https://${process.env.VERCEL_BRANCH_URL}`; | ||
| if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; |
There was a problem hiding this comment.
baseUrl to the commit-specific URL
When VERCEL_ENV !== "production", Vercel previews are reachable through both a branch URL and a commit-specific URL. This line now always sets Vocs' baseUrl from VERCEL_URL, and Vocs uses baseUrl to emit a <base> tag, so anyone opening the branch URL gets a page whose relative requests are rewritten to the commit host instead of the current origin. That means client fetches like fetch("/api/services") in src/data/registry.ts:8 can still fail with the same cross-origin/auth issues on the branch preview—the change only flips which preview hostname works.
Useful? React with 👍 / 👎.
1 participant
Problem
Preview deployments show "Failed to load services — Failed to fetch" on the /services page. All relative fetches (
/api/services, RSC requests) fail with CORS errors.Root Cause
Vocs injects a
<base href="...">tag using the configuredbaseUrl. For preview builds, this was set toVERCEL_BRANCH_URL(e.g.mpp-git-branchname-tempoxyz.vercel.app). When visiting via the deployment-specific URL (mpp-{hash}-tempoxyz.vercel.app), all relative fetches resolve against the wrong origin → CORS blocks them.This was previously masked by Vercel Deployment Protection (password auth), which canonicalized all traffic through the branch URL. After removing password auth, the origin mismatch is exposed.
Fix
Remove the
VERCEL_BRANCH_URLpreference and useVERCEL_URL(the deployment-specific URL) instead.VERCEL_URLalways matches the URL being visited, so the<base>tag resolves correctly.