Skip to content

configure-cors.mdx

Latest commit

 

History

History
170 lines (130 loc) · 6.81 KB

configure-cors.mdx

File metadata and controls

170 lines (130 loc) · 6.81 KB
title How to Configure CORS in Developer Portal
sidebarTitle Configure CORS
description 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.
keywords CORS, cross-origin resource sharing, Developer Portal CORS, Gateway CORS, API Playground, PORTAL_CORS_ENABLE

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 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.

[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`.

  1. Enable CORS

    Set PORTAL_CORS_ENABLE to true on the Portal process.

    ```ini PORTAL_CORS_ENABLE=true ``` ```json { "CORS": { "Enable": true } } ```

  2. Set allowed origins

    Set 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, all origins are allowed by default. Specify origins explicitly to restrict access.

    ```ini PORTAL_CORS_ALLOWED_ORIGINS=https://admin.example.com,https://developer.example.com ``` ```json { "CORS": { "AllowedOrigins": [ "https://admin.example.com", "https://developer.example.com" ] } } ``` Do not set [PORTAL_CORS_ALLOWED_ORIGINS](/product-stack/tyk-enterprise-developer-portal/deploy/configuration#portal-cors-allowed-origins) to `*` when `PORTAL_CORS_ALLOW_CREDENTIALS=true`. The CORS specification does not allow credentialed requests from wildcard origins. Specify each origin explicitly instead.

  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.

    ```ini PORTAL_CORS_ALLOWED_HEADERS=Authorization,Content-Type,X-Requested-With PORTAL_CORS_ALLOWED_METHODS=GET,POST,PUT,DELETE,OPTIONS ``` ```json { "CORS": { "AllowedHeaders": ["Authorization", "Content-Type", "X-Requested-With"], "AllowedMethods": ["GET", "POST", "PUT", "DELETE", "OPTIONS"] } } ```

  4. (Optional) Configure additional CORS settings

    Config key Default Description
    CORS.MaxAge 0 How long, in seconds, browsers may cache the preflight response. A positive value reduces preflight round trips.
    CORS.AllowCredentials 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.

**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 for diagnosis steps.

  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

    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.

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.

Related
⚡