> ## Documentation Index
> Fetch the complete documentation index at: https://tyk.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Configure CORS in Developer Portal

> Configure CORS for the Tyk Developer Portal application and for APIs exposed in the Live Portal, enabling consumers to test APIs from the API Playground.

Cross-origin request configuration in the Developer Portal involves two independent layers: the Portal application itself and the Tyk Gateway APIs that consumers test via the API Playground. Both layers must be configured for a fully functional cross-origin deployment.

## Prerequisites

* Developer Portal is deployed and accessible
* Tyk Gateway and Dashboard are running
* At least one [API product](/portal/api-products) is configured and published in the Portal
* You know the public URL of your Live Portal (for example, `https://portal.example.com`)
* You know the public URL of your Tyk Gateway (for example, `https://api.example.com`)

## Configure Portal Application CORS

Portal application CORS controls which external origins may call the Portal's own Admin API and Live Portal routes. It is configured via environment variables on the Portal process.

<Warning>
  [PORTAL\_CORS\_ENABLE](/product-stack/tyk-enterprise-developer-portal/deploy/configuration#portal_cors_enable) defaults to `false`. All cross-origin requests to the Portal are rejected until you set this to `true`.
</Warning>

1. **Enable CORS**

   Set [PORTAL\_CORS\_ENABLE](/product-stack/tyk-enterprise-developer-portal/deploy/configuration#portal_cors_enable) to `true` on the Portal process.

   <Tabs>
     <Tab title="Environment variable">
       ```ini theme={null}
       PORTAL_CORS_ENABLE=true
       ```
     </Tab>

     <Tab title="Config file">
       ```json theme={null}
       {
         "CORS": {
           "Enable": true
         }
       }
       ```
     </Tab>
   </Tabs>

2. **Set allowed origins**

   Set [PORTAL\_CORS\_ALLOWED\_ORIGINS](/product-stack/tyk-enterprise-developer-portal/deploy/configuration#portal_cors_allowed_origins) to the origins permitted to make cross-origin requests to the Portal. Use the exact scheme and host of each origin, separated by commas. Wildcards are supported.

   When unset, the Portal responds with `Access-Control-Allow-Origin: *`. Because Portal uses cookie-based sessions, browsers block credentialed requests to a wildcard origin. Specify individual origins to restrict access, or set to `http://*,https://*` to allow all origins.

   <Tabs>
     <Tab title="Environment variable">
       ```ini theme={null}
       PORTAL_CORS_ALLOWED_ORIGINS=https://admin.example.com,https://developer.example.com
       ```
     </Tab>

     <Tab title="Config file">
       ```json theme={null}
       {
         "CORS": {
           "AllowedOrigins": [
             "https://admin.example.com",
             "https://developer.example.com"
           ]
         }
       }
       ```
     </Tab>
   </Tabs>

   <Warning>
     Do not leave [PORTAL\_CORS\_ALLOWED\_ORIGINS](/product-stack/tyk-enterprise-developer-portal/deploy/configuration#portal_cors_allowed_origins) unset or set it to `*` when credentials are enabled. Both cause the Portal to respond with `Access-Control-Allow-Origin: *`, which browsers reject for credentialed requests. To allow all origins with credentials, use `http://*,https://*` instead.
   </Warning>

3. **Set allowed headers and methods**

   Set the HTTP headers and methods that cross-origin requests to the Portal may use. No headers are allowed by default. The default allowed methods are `GET` and `POST`.

   <Tabs>
     <Tab title="Environment variable">
       ```ini theme={null}
       PORTAL_CORS_ALLOWED_HEADERS=Authorization,Content-Type,X-Requested-With
       PORTAL_CORS_ALLOWED_METHODS=GET,POST,PUT,DELETE,OPTIONS
       ```
     </Tab>

     <Tab title="Config file">
       ```json theme={null}
       {
         "CORS": {
           "AllowedHeaders": ["Authorization", "Content-Type", "X-Requested-With"],
           "AllowedMethods": ["GET", "POST", "PUT", "DELETE", "OPTIONS"]
         }
       }
       ```
     </Tab>
   </Tabs>

4. **(Optional) Configure additional CORS settings**

   | Config key                                                                                                                 | Default | Description                                                                                                      |
   | -------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
   | [CORS.MaxAge](/product-stack/tyk-enterprise-developer-portal/deploy/configuration#portal_cors_max_age)                     | `0`     | How long, in seconds, browsers may cache the preflight response. A positive value reduces preflight round trips. |
   | [CORS.AllowCredentials](/product-stack/tyk-enterprise-developer-portal/deploy/configuration#portal_cors_allow_credentials) | `false` | Whether the Portal includes credentials (cookies, HTTP authentication) in CORS responses.                        |

5. **Restart the Portal**

   Restart the Portal process or pod for the environment variable changes to take effect.

6. **Verify**

   Open your browser developer tools and make a cross-origin request to the Portal from an allowed origin. The response headers should include `Access-Control-Allow-Origin` and the request should succeed.

***

## Configure Gateway CORS for APIs

When a consumer tests an API using the API Playground on the Live Portal, the browser makes requests directly to the Tyk Gateway. The Portal does not proxy these requests and does not inject CORS headers. You must configure CORS on the API definition for each API exposed through the Portal.

<Warning>
  **Tyk Gateway v5.8.6–v5.8.13:** A middleware ordering issue in these versions causes the allow list to run before CORS processing, returning `403 Forbidden` for OPTIONS preflight requests.

  Upgrade to Gateway v5.8.14 or later to resolve this. See [Troubleshoot CORS Issues](/portal/troubleshooting/cors-issues) for diagnosis steps.
</Warning>

1. **Locate the CORS block**

   In a Tyk OAS API definition, CORS configuration sits under `x-tyk-api-gateway.middleware.global.cors`.

2. **Add the CORS configuration**

   ```yaml expandable theme={null}
   x-tyk-api-gateway:
     middleware:
       global:
         cors:
           enabled: true
           allowedOrigins:
             - "https://portal.example.com"
           allowedMethods:
             - GET
             - POST
             - PUT
             - DELETE
             - OPTIONS
           allowedHeaders:
             - Origin
             - Content-Type
             - Authorization
           optionsPassthrough: false
   ```

   Set `optionsPassthrough` to `false` (the default). When `false`, the Gateway intercepts OPTIONS preflight requests, responds with CORS headers, and does not forward the request to the upstream.

3. **Update the API**

   Update the API definition in Tyk Dashboard.

4. **Verify**

   Open the API Playground on your Live Portal and send a test request. The request should complete without CORS errors in the browser console.

<Note>
  If you are using a **Tyk Classic API definition**, configure CORS in Tyk Dashboard under **APIs** > **Advanced Options** > **CORS**. See the [Classic API CORS reference](/api-management/gateway-config-tyk-classic#cross-origin-resource-sharing-cors) for details.
</Note>

## Related

* [Troubleshoot CORS Issues](/portal/troubleshooting/cors-issues) — diagnose and fix common CORS errors in the Developer Portal and API Playground