The Guild LogoThe Guild Monogram
Docs

Yoga

Fully-featured, simple to set up, performant and extendable GraphQL JavaScript server

Get Started

Configuring CORS with Yoga#

CORS stands for Cross Origin Resource Sharing. In a nutshell, as a security measure, browsers aren't allowed to access resources outside their own domain.

If your api and web apps are deployed to different domains (or subdomains), you'll have to worry about CORS. For example, if your web client is deployed to example.com but your Yoga server is api.example.com. For security reasons your browser will not allow XHR requests (like the kind that the GraphQL client makes) to a domain other than the one currently in the browser's address bar.

To deal with this you have two options:

1. Avoid CORS by proxying your requests e.g. If you setup a proxy or redirect to forward requests from example.com/api/* to api.example.com, you avoid CORS issues all together.

2. Configure Yoga to send back CORS headers Yoga comes with CORS support out of the box - CORS can be configured when creating the server either by passing a CORSOptions object, or a builder function that returns the CORSOptions object.

export type CORSOptions = | { origin?: string[] | string methods?: string[] allowedHeaders?: string[] exposedHeaders?: string[] credentials?: boolean maxAge?: number } | false

Example configuration using CORSOptions#

import { createServer } from '@graphql-yoga/common' const yogaApp = createServer({ cors: { origin: 'http://localhost:4000', credentials: true, allowedHeaders: ['X-Custom-Header'], methods: ['POST'], }, /* ...other args */ })

This will return the following headers:

Access-Control-Allow-Origin: 'http://localhost:4000' Access-Control-Allow-Credentials: true Access-Control-Allow-Methods: POST Access-Control-Allow-Headers: X-Custom-Header

Example configuration using builder function#

You can also pass a function to the cors property, that takes your request and contructs the options

import { createServer } from '@graphql-yoga/common' const yogaApp = createServer({ cors: (request) => { const requestOrigin = request.headers.get('origin') return { origin: requestOrigin, credentials: true, allowedHeaders: ['X-Custom-Header'], methods: ['POST'], } }, })

This will return the same headers as the previous example, but take the origin of the request, and return it in the Access-Control-Allow-Origin header.

Default CORS setting#

By default, GraphQL Yoga will return Access-Control-Allow-Origin: * when preflight requests are made.

This means cross origin requests from browsers work out of the box - however it may be appropriate to lock to a specifc domain before deploying to production.

Disabling CORS#

You can disable CORS on your Yoga server by simply passing false as the cors property

For example:

import { createServer } from '@graphql-yoga/common' const yogaApp = createServer({ cors: false, /* ...other args */ })

This will remove all Access-Control headers from the response.