# CORS when frontend runs on another machine

When your **client frontend** runs on a different system (e.g. `192.168.1.11:3000`) or on `localhost:3000` and calls this backend, you need CORS and network access set correctly.

## Understanding the error

- **"from origin 'http://localhost:3000'"** = your frontend is served from `http://localhost:3000`.
- **"blocked by CORS policy"** = the browser blocks the response because the backend did not allow that origin.
- **"No 'Access-Control-Allow-Origin' header"** = the backend’s allowed-origins list did not include `http://localhost:3000`, so it didn’t send that header.

**Fix:** Add the **exact** origin the browser sends to `STORE_CORS` and `AUTH_CORS` in `.env`. For a frontend at `http://localhost:3000`, the list must include `http://localhost:3000`. Then restart the backend.

## 1. Allowed origins in `.env`

Your frontend origin must be listed in all three CORS variables. Example for frontend at `http://192.168.1.11:3000`:

```env
STORE_CORS=http://localhost:8000,https://docs.medusajs.com,http://192.168.1.11:3000
ADMIN_CORS=http://localhost:5173,http://localhost:9000,http://localhost:64453,https://docs.medusajs.com,http://192.168.1.11:3000
AUTH_CORS=http://localhost:5173,http://localhost:9000,http://localhost:8000,http://localhost:64453,https://docs.medusajs.com,http://192.168.1.11:3000
```

- Use the **exact** origin the browser sends (scheme + host + port), e.g. `http://192.168.1.11:3000`.
- No trailing slash. No spaces in the list (comma-separated only).
- After changing `.env`, **restart the backend** (`npm run dev` or `medusa start`).

## 2. Backend reachable from the frontend machine

The machine where the frontend runs (e.g. 192.168.1.11) must be able to reach the backend over the network.

- If the **backend runs on the same PC** as the one at 192.168.1.11, the backend must listen on that IP or on all interfaces (`0.0.0.0`), not only `localhost`, so the frontend can call it (e.g. `http://192.168.1.11:9000` or the backend machine’s IP).
- If the **backend runs on another PC** (e.g. 192.168.1.5), that PC must allow connections on port 9000 and the frontend must use the backend’s URL (e.g. `http://192.168.1.5:9000`).

To make the Medusa server listen on all interfaces (so other machines can reach it), start it with:

```bash
# Windows (PowerShell)
$env:HOST="0.0.0.0"; npm run dev

# Linux/macOS
HOST=0.0.0.0 npm run dev
```

Or add to `.env`:

```env
HOST=0.0.0.0
```

Then from the frontend machine, the API base URL should be the backend’s LAN IP and port, e.g. `http://<backend-ip>:9000` (not `http://localhost:9000`).

## 3. Frontend API base URL

In the app running at `192.168.1.11:3000`, set the Medusa API base URL to the **backend’s address** as seen from that machine, e.g.:

- Same machine: `http://192.168.1.11:9000` (or `http://localhost:9000` only if frontend and backend are on the same host).
- Different machine: `http://<backend-ip>:9000` (e.g. `http://192.168.1.5:9000`).

## Checklist

1. `.env` has `http://192.168.1.11:3000` in `STORE_CORS`, `ADMIN_CORS`, and `AUTH_CORS`.
2. Backend restarted after any `.env` change.
3. Backend is reachable from 192.168.1.11 (listening on `0.0.0.0` or the right IP; firewall allows port 9000).
4. Frontend is configured to call the backend using the backend’s real URL (e.g. `http://<backend-ip>:9000`).

If CORS errors persist, check the browser Network tab: the failing request’s **Origin** header must match one of the values in the CORS env vars exactly.
