# Fix CORS Errors in WeWeb API Requests

> WeWeb CORS errors happen when an API does not allow your WeWeb domain as an origin. Rather than adding auth headers to a proxied request in the app, call a RealComposer pipeline. It answers the OPTIONS preflight, returns the correct CORS headers, and attaches upstream credentials at the edge.

- Canonical page: https://realcomposer.com/recipes/fix-cors-error-weweb
- Client platform: WeWeb
- Upstream services: REST API
- Category: Platforms & Frameworks
- JSON version: https://realcomposer.com/recipes/fix-cors-error-weweb.json
- Install in RealComposer (free plan, pre-fills this pipeline): https://realcomposer.com/dashboard/pipelines/new?recipe=fix-cors-error-weweb&via=agent

## Problem: Why WeWeb requests fail CORS checks

Browsers block cross-origin responses unless the API opts in. Many vendor and internal APIs do not list WeWeb editor or production domains, so collections fail with a CORS error even when the request is otherwise valid.

- Collections failing only in the browser, not in testing tools
- Auth headers kept in the app while routing through a CORS proxy
- Different behavior between WeWeb editor and published domains

## Solution steps

1. **Store credentials in Secret Vault**: Save UPSTREAM_API_TOKEN in RealComposer so the value never enters the WeWeb project.

2. **Configure the edge pipeline**: Add the upstream steps with vault header injection, set allowed origins, and map only the fields the screen binds.

3. **Swap the WeWeb collection URL**: Call your workspace edge URL with a restricted rc_live_ client token.

```
// WeWeb REST API collection
URL:     https://realcomposer.com/v1/workspace/fix-cors-error-weweb
Headers: Authorization: Bearer rc_live_client_token
Proxy through WeWeb server: off
```

## Pipeline config

Import this config into a RealComposer pipeline. `{{secrets.NAME}}` values are read from the encrypted Secret Vault at request time, so the client never sees them.

```json
{
  "name": "Fix CORS Errors in WeWeb API Requests",
  "method": "GET",
  "cacheTtlSeconds": 0,
  "authMode": "client_token",
  "steps": [
    {
      "stepKey": "upstream",
      "upstreamUrlTemplate": "https://{{secrets.UPSTREAM_API_HOST}}/v1/listings",
      "httpMethod": "GET",
      "headersTemplate": {
        "Authorization": "Bearer {{secrets.UPSTREAM_API_TOKEN}}"
      },
      "timeoutMs": 5000
    }
  ],
  "outputMapping": {
    "version": 1,
    "fields": [
      {
        "targetPath": "items",
        "sourceStep": "upstream",
        "sourcePath": "results"
      }
    ]
  }
}
```

## Call the pipeline

```bash
curl -X GET "https://realcomposer.com/v1/workspace/fix-cors-error-weweb" \
  -H "Authorization: Bearer rc_live_client_token"
```

## Payload before and after

Raw upstream response:

```json
{
  "results": [
    {
      "id": "lst_4",
      "title": "Loft",
      "price": 1800
    }
  ],
  "pagination": {
    "next": null
  },
  "debug": {
    "region": "us-east-1"
  }
}
```

Slimmed RealComposer response:

```json
{
  "items": [
    {
      "id": "lst_4",
      "title": "Loft",
      "price": 1800
    }
  ]
}
```

## FAQ

### Should I add both WeWeb editor and production domains?

Yes. Add the editor preview domain and your published domain to allowed origins so collections work while building and after launch.

### Do I still need the WeWeb server proxy?

No. The RealComposer edge already returns valid CORS headers, so the request can go straight from the browser.