How to Configure CORS in Developer Portal

​

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

1. Enable CORS Set PORTAL_CORS_ENABLE to true on the Portal process.
   • Environment variable
   • Config file

   PORTAL_CORS_ENABLE=true
   

   {
     "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, 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.
   • Environment variable
   • Config file

   PORTAL_CORS_ALLOWED_ORIGINS=https://admin.example.com,https://developer.example.com
   

   {
     "CORS": {
       "AllowedOrigins": [
         "https://admin.example.com",
         "https://developer.example.com"
       ]
     }
   }
   
   Do not leave 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.
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.
   • Environment variable
   • Config file

   PORTAL_CORS_ALLOWED_HEADERS=Authorization,Content-Type,X-Requested-With
   PORTAL_CORS_ALLOWED_METHODS=GET,POST,PUT,DELETE,OPTIONS
   

   {
     "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

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
   

   See all 18 lines
   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.

​

Related

• Troubleshoot CORS Issues — diagnose and fix common CORS errors in the Developer Portal and API Playground