Skip to content

CORS

CORS (Cross-Origin Resource Sharing) is a security feature in web browsers that permits controlled and safe cross-origin requests between websites.

CORS diagram

Introduction

CORS, is implemented in web browsers to control and manage how web pages from one domain can interact with resources hosted on another domain.

When a web page loaded from one origin (domain) tries to make a request to a different origin, the browser enforces the same-origin policy by default, which prevents most cross-origin requests.
However, there are valid scenarios where cross-origin communication is necessary, such as fetching data from APIs or loading resources like fonts and scripts from other domains.

CORS allows server owners to specify which origins are permitted to access their resources through HTTP headers.

CORS and Traefik Hub

By default, Traefik Hub ships with a couple of default CORS policies to allow users to try out API requests in the API Portal.

CORS diagram

If you don't set up CORS for APIs, Traefik Hub will automatically apply these.

Please check the default CORS policies below!

Default CORS policies

Traefik Hub allows the following CORS headers with these default settings:

Header Description Link Default
Access-Control-Allow-Credentials The header tells browsers whether to expose the response to the frontend JavaScript code when the request's credentials mode (Request.credentials) is include. Docs on MDN True
Access-Control-Allow-Origin The header indicates whether the response can be shared with requesting code from the given origin. Docs on MDN *
Access-Control-Allow-Headers Used in response to a preflight request which includes the Access-Control-Request-Headers to indicate which HTTP headers can be used during the actual request. Docs on MDN *
HTTP methods HTTP defines a set of request methods to indicate the desired action to be performed for a given resource. Docs on MDN GET, HEAD, POST, PUT, PATCH, DELETE, CONNECT, OPTIONS, TRACE

Be cautious

For example, if you tighten the settings for Access-Control-Allow-Origin, make sure to allow the Portal URL, otherwise the try out function wil not work anymore.

Custom Resource Definitions

CORS needs to be configured in the API CRD or in the APIVersion CRD.
If you version your APIs, you need to add the CORS configuration to the APIVersion CRD.

If you don't version your APIs, please add your CORS settings to the API CRD.

---
apiVersion: hub.traefik.io/v1alpha1
kind: API
metadata:
  name: customer-api
  namespace: apps
  labels:
    area: customers
    module: crm
spec:
  pathPrefix: "/customers"
  service:
    openApiSpec:
      path: /openapi.yaml
      port:
        number: 3000
    name: customer-app
    port:
      number: 3000
  cors:
    allowCredentials: true
    allowOriginList:
      - "*"
    allowHeaders:
      - "Accept"
      - "Accept-Language"
      - "Content-Language"
      - "Content-Type"
      - "Authorization"
      - "X-TraefikLabs-User"
    allowMethods:
       - "GET"
       - "POST"
       - "PUT"
---
# Example of versioning an API using `pathPrefix` for URI path and CORS.
apiVersion: hub.traefik.io/v1alpha1
kind: APIVersion
metadata:
  name: my-flights-api-v2
  namespace: apps
spec:
  # The API this version is referencing (assumed to be in the same namespace).
  apiName: my-versioned-flights-api
  # SemVer of the release
  release: v2.0.0
  title: "An awesome title for this release, like a cheese name"
  routes:
    # The API will be available on one route using URI path for versioning.
    # Example: curl https://api.example.com/flights/v2.0.0
    - pathPrefix: "/v2.0.0"
  # The path prefix of the route will be removed and not forwarded with the request.
  stripPathPrefix: true
  service:
    name:  flights-svc-v2
    port:
      number: 8080
    openApiSpec:
      path: /api/v2/openapi.json
      port:
        number: 8080
  cors:
    allowCredentials: true
    allowOriginList:
      - "*"
    allowHeaders:
      - "Accept"
      - "Accept-Language"
      - "Content-Language"
      - "Content-Type"
      - "Authorization"
      - "X-TraefikLabs-User"
    allowMethods:
       - "GET"
       - "HEAD"
       - "POST"
       - "PUT"

What's next