---
description:
  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.
searchable: false
---

import { Callout } from '@theguild/components'

# CORS

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 Hive Gateway 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 the gateway to send back CORS headers_ Hive Gateway 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.

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

### Example configuration using CORSOptions

```ts filename="gateway.config.ts"
import { defineConfig } from '@graphql-hive/gateway'

export const gatewayConfig = defineConfig({
  cors: {
    origin: 'http://localhost:4000',
    credentials: true,
    allowedHeaders: ['X-Custom-Header'],
    methods: ['POST']
  }
})
```

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 constructs the
options

```ts filename="gateway.config.ts"
import { defineConfig } from '@graphql-hive/gateway'

export const gatewayConfig = defineConfig({
  cors: request => {
    return {
      origin: 'http://localhost:4000',
      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, Hive Gateway 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 specific domain before deploying to production.

## Disabling CORS

You can disable CORS on your gateway by simply passing `false` as the cors property

**For example:**

```ts filename="gateway.config.ts"
import { defineConfig } from '@graphql-hive/gateway'

export const gatewayConfig = defineConfig({
  cors: false
})
```

<Callout>
  If you disable CORS, you may run into issues with your web client not being able to access the
  Hive Gateway. This is because of the browser's security policy.
</Callout>
