From e5ec610959f16323983e0f805eba98161abecae5 Mon Sep 17 00:00:00 2001 From: cte Date: Thu, 29 Jan 2026 10:29:49 -0800 Subject: [PATCH 1/3] docs: add frontend dev server config to CORS section Cover both sides of CORS in preview environments: backend origin allowlisting and frontend dev server host configuration (Vite allowedHosts, Next.js allowedDevOrigins). Co-Authored-By: Claude Opus 4.5 --- docs/roo-code-cloud/environments.mdx | 59 ++++++++++++++++------------ 1 file changed, 33 insertions(+), 26 deletions(-) diff --git a/docs/roo-code-cloud/environments.mdx b/docs/roo-code-cloud/environments.mdx index 63c028da..5bc5290b 100644 --- a/docs/roo-code-cloud/environments.mdx +++ b/docs/roo-code-cloud/environments.mdx @@ -323,46 +323,53 @@ After the environment starts, you'll get unique URLs for each port. Visit the WE ### CORS Errors -In a preview environment, your frontend and backend run on different domains (e.g., `https://abc123.vercel.run` and `https://def456.vercel.run`). Browsers block cross-origin requests by default, so your backend needs to explicitly allow the frontend's domain. +In a preview environment, your frontend and backend run on different domains (e.g., `https://abc123.vercel.run` and `https://def456.vercel.run`). Browsers block cross-origin requests by default, so you need to configure both sides: the backend must allow the frontend's origin, and the frontend dev server must accept the preview domain. -Use the `ROO_WEB_HOST` variable to configure your backend's CORS policy: +Make sure both ports are defined so the `ROO_*_HOST` variables get injected: -**Express:** - -```typescript -import cors from 'cors'; - -app.use(cors({ - origin: process.env.ROO_WEB_HOST || 'http://localhost:3000' -})); +```yaml +ports: + - name: WEB + port: 3000 + - name: API + port: 3001 ``` -**Hono:** +#### Backend: Allow the frontend origin -```typescript -import { cors } from 'hono/cors'; +Use `ROO_WEB_HOST` to configure your backend's CORS policy: -app.use(cors({ - origin: process.env.ROO_WEB_HOST || 'http://localhost:3000' -})); -``` +```typescript +// Express +import cors from 'cors'; +app.use(cors({ origin: process.env.ROO_WEB_HOST || 'http://localhost:3000' })); -**Fastify:** +// Hono +import { cors } from 'hono/cors'; +app.use(cors({ origin: process.env.ROO_WEB_HOST || 'http://localhost:3000' })); -```typescript +// Fastify app.register(import('@fastify/cors'), { origin: process.env.ROO_WEB_HOST || 'http://localhost:3000' }); ``` -Then in your environment config, make sure both ports are defined so the variables get injected: +#### Frontend: Allow the preview domain -```yaml -ports: - - name: WEB - port: 3000 - - name: API - port: 3001 +Dev servers like Vite and Next.js reject requests from unrecognized hosts by default. You need to allow the preview domain so the dev server responds to requests on `https://.vercel.run`: + +```typescript +// Vite — vite.config.ts +export default defineConfig({ + server: { + allowedHosts: true, // allow all hosts (simplest for preview environments) + } +}) + +// Next.js — next.config.ts +export default { + allowedDevOrigins: ['*.vercel.run'], +} ``` ### Managing Frontend API URLs with `.env` Files From f51de8207ca2115330cf20d85d300789a8eedfed Mon Sep 17 00:00:00 2001 From: cte Date: Thu, 29 Jan 2026 10:33:33 -0800 Subject: [PATCH 2/3] docs: use specific allowedHosts for Vite instead of true Co-Authored-By: Claude Opus 4.5 --- docs/roo-code-cloud/environments.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/roo-code-cloud/environments.mdx b/docs/roo-code-cloud/environments.mdx index 5bc5290b..2121dbcc 100644 --- a/docs/roo-code-cloud/environments.mdx +++ b/docs/roo-code-cloud/environments.mdx @@ -362,7 +362,7 @@ Dev servers like Vite and Next.js reject requests from unrecognized hosts by def // Vite — vite.config.ts export default defineConfig({ server: { - allowedHosts: true, // allow all hosts (simplest for preview environments) + allowedHosts: ['.vercel.run'], } }) From 777f9635f55c7f8188c6e7368e9192cd87e8e4c4 Mon Sep 17 00:00:00 2001 From: cte Date: Thu, 29 Jan 2026 10:45:09 -0800 Subject: [PATCH 3/3] docs: use ROO_WEB_HOST for frontend allowedHosts config Extract hostname from the full URL for Vite's allowedHosts, and use the env var directly for Next.js allowedDevOrigins. Co-Authored-By: Claude Opus 4.5 --- docs/roo-code-cloud/environments.mdx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/roo-code-cloud/environments.mdx b/docs/roo-code-cloud/environments.mdx index 2121dbcc..ba87ac1d 100644 --- a/docs/roo-code-cloud/environments.mdx +++ b/docs/roo-code-cloud/environments.mdx @@ -362,13 +362,17 @@ Dev servers like Vite and Next.js reject requests from unrecognized hosts by def // Vite — vite.config.ts export default defineConfig({ server: { - allowedHosts: ['.vercel.run'], + allowedHosts: process.env.ROO_WEB_HOST + ? [new URL(process.env.ROO_WEB_HOST).hostname] + : [], } }) // Next.js — next.config.ts export default { - allowedDevOrigins: ['*.vercel.run'], + allowedDevOrigins: process.env.ROO_WEB_HOST + ? [process.env.ROO_WEB_HOST] + : [], } ```