CORS in GraphQL API - Practical Examples

Understanding CORS in GraphQL APIs

Cross-Origin Resource Sharing (CORS) is a security feature that allows or restricts resources requested from a domain outside the domain from which the first resource was served. When implementing a GraphQL API, setting up CORS is essential to enable frontend applications hosted on different domains to access your API securely. Below are three practical examples demonstrating how to set up CORS in a GraphQL API context.

Example 1: Basic CORS Setup with Express

In this example, we’ll set up a simple GraphQL API using Express and the cors middleware to allow requests from a specific origin.

In a scenario where you are developing a frontend application hosted at http://localhost:3000 and your GraphQL API is served from http://localhost:4000, you will need to enable CORS to allow the frontend to communicate with your API.

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const cors = require('cors');

const app = express();
const PORT = 4000;

// Define a simple GraphQL schema
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// Root resolver
const root = { hello: () => 'Hello world!' };

// Enable CORS for specific origin
app.use(cors({ origin: 'http://localhost:3000' }));

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}/graphql`);
});

In this code:

• We import necessary modules and define our GraphQL schema.
• The cors middleware is set up to allow requests only from http://localhost:3000.
• This ensures that only the specified frontend can access the API.

Notes:

• You can modify the origin option to allow multiple domains by passing an array or a function that dynamically checks the request origin.

Example 2: Configuring CORS with Custom Headers

This example demonstrates how to configure CORS with custom headers in a GraphQL API using Apollo Server. This is particularly useful when you have client applications that require specific headers for authentication or other purposes.

Imagine your API needs to accept requests from a client hosted on https://example.com and expects custom headers like Authorization. Here’s how you would implement it:

const { ApolloServer, gql } = require('apollo-server');
const cors = require('cors');

const typeDefs = gql`
  type Query {
    welcome: String
  }
`;

const resolvers = {
  Query: {
    welcome: () => 'Welcome to the GraphQL API!',
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  cors: {
    origin: 'https://example.com',
    allowedHeaders: ['Content-Type', 'Authorization'],
  },
});

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

In this setup:

• We define a GraphQL schema and resolvers using Apollo Server.
• The cors option allows requests from https://example.com and specifies which headers are permitted, enhancing security and ensuring the API functions correctly with custom headers.

Notes:

• Adjust the allowedHeaders array to include any additional headers your application might require.

Example 3: Allowing Credentials in CORS

In this final example, we will show how to enable credentials in CORS for a GraphQL API. This is relevant when you need to send cookies or HTTP authentication information with requests from a frontend application.

Consider a scenario where your API is hosted at https://api.myapp.com and your frontend at https://myapp.com. To allow credentials, you need to configure CORS accordingly:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const cors = require('cors');

const app = express();
const PORT = 5000;

const schema = buildSchema(`
  type Query {
    user: String
  }
`);

const root = { user: () => 'User data here' };

// Enable CORS with credentials
app.use(cors({
  origin: 'https://myapp.com',
  credentials: true,
}));

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

app.listen(PORT, () => {
  console.log(`Server running at https://localhost:${PORT}/graphql`);
});

In this configuration:

• We allow CORS from https://myapp.com and set credentials to true to enable sending cookies or HTTP auth information with requests.

Notes:

• Ensure your client-side code is also set to include credentials when making requests, typically by setting credentials: 'include' in the fetch options.

By implementing these examples of setting up CORS for a GraphQL API, you can effectively manage cross-origin requests, enhancing both the security and functionality of your application.