Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 33 additions & 26 deletions docs/roo-code-cloud/environments.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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://<id>.vercel.run`:

```typescript
// Vite — vite.config.ts
export default defineConfig({
server: {
allowedHosts: ['.vercel.run'],
}
})

// Next.js — next.config.ts
export default {
allowedDevOrigins: ['*.vercel.run'],
}
```

### Managing Frontend API URLs with `.env` Files
Expand Down