Configure CORS

This section describes how to configure CORS in WunderGraph.

Contrary to popular belief, CORS does not protect your API from cross-origin requests. It's a security feature that protects your users from unintentionally sending requests to your API from other domains.

A website might trick your users into sending requests to your API. In this scenario, enabling CORS will prevent the browser from sending requests with the user's credentials "cross-origin".

For development purposes, enabling CORS for all origins can be helpful.

configureWunderGraphApplication({
  cors: {
    ...cors.allowAll,
  },
});

This configuration is a bit more advanced, enabling all defaults but limiting the allowed origins. This should be the most common configuration.

configureWunderGraphApplication({
  cors: {
    ...cors.allowAll,
    allowedOrigins: ['http://localhost:3000'],
  },
});

If you'd like to fully customize the configuration, don't use ...cors.allowAll but instead configure all options manually. This allows you e.g. to set a custom maxAge value to cache CORS responses for a specific time.

configureWunderGraphApplication({
  cors: {
    maxAge: 86400,
    allowedHeaders: ['Authorization'],
    allowedMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    exposedHeaders: ['Authorization'],
    allowCredentials: true,
    allowedOrigins: ['http://localhost:3000'],
  },
});

An origin may contain a wildcard (*) to replace 0 or more characters. Usage of wildcards implies a small performance penalty.

configureWunderGraphApplication({
  cors: {
    ...cors.allowAll,
    allowedOrigins: ['https://*.wundergraph.com'],
  },
});