Configuring CORS

By default, the router enables only GraphOS Studio to initiate browser connections to it. If your supergraph serves data to other browser-based applications, you need to do one of the following in the cors section of your router's YAML config file:

• Add the origins of those web applications to the router's list of allowed origins.

  • Use this option if there is a known, finite list of web applications that consume your supergraph.

• Add a regex that matches the origins of those web applications to the router's list of allowed origins.

  • This option comes in handy if you want to match origins against a pattern, see the example below that matches subdomains of a specific namespace.

• Enable the allow_any_origin option.

  • Use this option if your supergraph is a public API with arbitrarily many web app consumers.

  • With this option enabled, the router sends the wildcard (*) value for the Access-Control-Allow-Origin header. This enables any website to initiate browser connections to it (but they can't provide cookies or other credentials).

• If clients need to authenticate their requests with cookies, you must use either origins, match_origins, or the combination of both options. When using both options, note that origins is evaluated before match_origins.

The following snippet includes an example of each option (use either allow_any_origin, or origins and/or match_origins):

1cors:
2
3  # Set to true to allow any origin
4  # (Defaults to false)
5  allow_any_origin: true
6
7  # List of accepted origins
8  # (Ignored if allow_any_origin is true)
9  # (Defaults to the GraphOS Studio url: `https://studio.apollographql.com`)
10  #
11  # An origin is a combination of scheme, hostname and port.
12  # It does not have any path section, so no trailing slash.
13  origins:
14    - https://www.your-app.example.com
15    - https://studio.apollographql.com # Keep this so GraphOS Studio can run queries against your router
16  match_origins:
17    - "^https://([a-z0-9]+[.])*api[.]example[.]com$" # any host that uses https and ends with .api.example.com

You can also disable CORS entirely by setting origins to an empty list:

1cors:
2  origins: []

If your router serves exclusively non-browser-based clients, you probably don't need to modify the default CORS configuration.

Passing credentials

If your router requires requests to include a user's credentials (e.g., via cookies), you need to modify your CORS configuration to tell the browser those credentials are allowed.

You can enable credentials with CORS by setting the Access-Control-Allow-Credentials HTTP header to true.

To allow browsers to pass credentials to the router, set allow_credentials to true, like so:

1cors:
2  origins:
3    - https://www.your-app.example.com
4    - https://studio.apollographql.com
5  allow_credentials: true

Additionally, you'll need to configure the router to forward the Cookie header to some (or all) of your subgraphs:

1headers:
2  all:
3    request:
4      - propagate:
5          named: cookie

For examples of sending cookies and authorization headers from Apollo Client, see Authentication.

All cors options

The following snippet shows all CORS configuration defaults for the router:

1#
2# CORS (Cross Origin Resource Sharing)
3#
4cors:
5
6  # Set to true to allow any origin
7  allow_any_origin: false
8
9  # List of accepted origins
10  # (Ignored if allow_any_origin is set to true)
11  #
12  # An origin is a combination of scheme, hostname and port.
13  # It does not have any path section, so no trailing slash.
14  origins:
15    - https://studio.apollographql.com # Keep this so GraphOS Studio can still run queries against your router
16
17  # Set to true to add the `Access-Control-Allow-Credentials` header
18  allow_credentials: false
19
20  # The headers to allow.
21  # Not setting this mirrors a client's received `access-control-request-headers`
22  # This is equivalent to allowing any headers,
23  # except it will also work if allow_credentials is set to true
24  allow_headers: []
25
26  # Allowed request methods
27  methods:
28    - GET
29    - POST
30    - OPTIONS
31
32  # Which response headers are available to scripts running in the
33  # browser in response to a cross-origin request.
34  expose_headers: []
35
36  # Adds the Access-Control-Max-Age header
37  # Can be set to a duration in time units 
38  # If not set, the header is not included
39  max_age: 2h

Response Vary header

A plugin may set a response Vary header. If, after all plugins are processed, there is no response Vary header, then the router will add one with a value of "origin".