CORS blocking is preventing Next JS due to lack of HTTP OK response status

Question

CORS blocking is preventing Next JS due to lack of HTTP OK response status

When utilizing GraphQL to facilitate communication between a client and server across different domains, I took the necessary steps to enable CORS on my API website by referring to the documentation provided by Vercel. However, it appears that I am encountering an error that states:

blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Here is a snippet of the code I implemented in GraphQL:

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === "undefined",
    link: new HttpLink({
      uri: <link>,
      credentials: "include",
      fetchOptions: {
        mode: "cors",
      },
    }),
  }),
 ...
}

Additionally, within the API website, the next.config.js file contains the following configuration:

module.exports = {
  async headers() {
    return [
      {
        // matching all API routes
        source: "/api/:path*",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          {
            key: "Access-Control-Allow-Origin",
            value: <link>,
          },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
          },
          {
            key: "Access-Control-Allow-Headers",
            value:
              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Access-Control-Allow-Origin",
          },
        ],
      },
    ];
  },
};

I am unsure whether there is an issue with my next.config.js setup or if the problem lies within the Apollo Client implementation as I do not utilize Express. Any insights or suggestions would be greatly appreciated. Thank you!

node.js cors next.js apollo apollo-client

Answer 1

Answer №1

Utilizing the latest version of next.js

`/api/graphql`

import { ApolloServer } from '@apollo/server';
import { startServerAndCreateNextHandler } from '@as-integrations/next';
import schema from '../../graphql';
import connectDatabase from '../../graphql/utils/mongoose';
import apiConfig from '../../graphql/utils/config';
import allowCors from '../../utils/cors';

const apolloServer = new ApolloServer({
  schema,
  introspection: true,
  playground: true,
  context: async () => {
    console.log('context ready');
    await connectDatabase(apiConfig.get('mongodb'));
    console.log('db connected');
  },
});

const handler = startServerAndCreateNextHandler(apolloServer, {
  context: async (req, res) => ({ req, res }),
});

export default allowCors(handler);

/utils/cors

const allowCors = (fn) => async (req, res) => {
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Allow-Origin', '*');
  // another common pattern
  res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
  );
  if (req.method === 'OPTIONS') {
    res.status(200).end();
    return;
  }
  await fn(req, res);
};

export default allowCors;

Answer 2

Utilizing the latest version of next.js

`/api/graphql`

import { ApolloServer } from '@apollo/server';
import { startServerAndCreateNextHandler } from '@as-integrations/next';
import schema from '../../graphql';
import connectDatabase from '../../graphql/utils/mongoose';
import apiConfig from '../../graphql/utils/config';
import allowCors from '../../utils/cors';

const apolloServer = new ApolloServer({
  schema,
  introspection: true,
  playground: true,
  context: async () => {
    console.log('context ready');
    await connectDatabase(apiConfig.get('mongodb'));
    console.log('db connected');
  },
});

const handler = startServerAndCreateNextHandler(apolloServer, {
  context: async (req, res) => ({ req, res }),
});

export default allowCors(handler);

/utils/cors

const allowCors = (fn) => async (req, res) => {
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Allow-Origin', '*');
  // another common pattern
  res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
  );
  if (req.method === 'OPTIONS') {
    res.status(200).end();
    return;
  }
  await fn(req, res);
};

export default allowCors;

Answer 3

Answer №2

To resolve the issue, I implemented an alternative approach to configuring CORS by using:

const allowCors = fn => async (req, res) => {
  res.setHeader('Access-Control-Allow-Credentials', true)
  res.setHeader('Access-Control-Allow-Origin', '*')
  // another common pattern
  // res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT')
  res.setHeader(
    'Access-Control-Allow-Headers',
    'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
  )
  if (req.method === 'OPTIONS') {
    res.status(200).end()
    return
  }
  return await fn(req, res)
}

I was confident that this solution would be effective because of the condition set on the req.method === OPTIONS part, which addressed the missing HTTP ok status in the request. Instead of manually passing the header, I leveraged the existing apolloServer handler utilized in my API:

const apolloServer = new ApolloServer({
  schema,
  context: dbConnect(),
});

export const config = {
  api: {
    bodyParser: false,
  },
};

const handler = apolloServer.createHandler({ path: "/api/graphql" }); // THIS

Subsequently, I incorporated it and exported

export default allowCors(handler)

.

Credit goes to @slideshowbarker for the valuable insight!

Answer 4

To resolve the issue, I implemented an alternative approach to configuring CORS by using:

const allowCors = fn => async (req, res) => {
  res.setHeader('Access-Control-Allow-Credentials', true)
  res.setHeader('Access-Control-Allow-Origin', '*')
  // another common pattern
  // res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT')
  res.setHeader(
    'Access-Control-Allow-Headers',
    'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
  )
  if (req.method === 'OPTIONS') {
    res.status(200).end()
    return
  }
  return await fn(req, res)
}

I was confident that this solution would be effective because of the condition set on the req.method === OPTIONS part, which addressed the missing HTTP ok status in the request. Instead of manually passing the header, I leveraged the existing apolloServer handler utilized in my API:

const apolloServer = new ApolloServer({
  schema,
  context: dbConnect(),
});

export const config = {
  api: {
    bodyParser: false,
  },
};

const handler = apolloServer.createHandler({ path: "/api/graphql" }); // THIS

Subsequently, I incorporated it and exported

export default allowCors(handler)

.

Credit goes to @slideshowbarker for the valuable insight!

Answer 5

Answer №3

Give this a shot, it should do the trick:

const connection = new ApolloClient({
  dataStore: new InMemoryCache(),
  serverEndpoint: **update**,
  securityOptions: {
    'Access-Control-Allow-Origin': '*'
  }
});

Answer 6

Give this a shot, it should do the trick:

const connection = new ApolloClient({
  dataStore: new InMemoryCache(),
  serverEndpoint: **update**,
  securityOptions: {
    'Access-Control-Allow-Origin': '*'
  }
});

Answer 7

Answer №4

import { ApolloServer } from "apollo-server-micro";
import allowCors from "../../../utils/cors";
import typeDefs from "../../../graphql/schemas";
import resolvers from "../../../graphql/requests";

const apolloServer = new ApolloServer({
  typeDefs: typeDefs,
  resolvers,

  // playground: true,
  introspection: true,
  context: ({ req }) => {
    return {
      headers: req.headers,
    };
  },
  cache: "bounded",
  // plugins: [ApolloServerPluginLandingPageGraphQLPlayground()],
});

const startServer = apolloServer.start();

async function handler(req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*");

  await startServer;
  await apolloServer.createHandler({
    path: "/api/graphql",
  })(req, res);
}

export const config = {
  api: {
    bodyParser: false,
  },
};

export default allowCors(handler);

utils/cors.js

const allowCors = (fn) => async (req, res) => {
  res.setHeader("Access-Control-Allow-Credentials", true);
  res.setHeader("Access-Control-Allow-Origin", "*");
  // another common pattern
  // res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET,OPTIONS,PATCH,DELETE,POST,PUT"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
  );
  if (req.method === "OPTIONS") {
    res.status(200).end();
    return;
  }
  return await fn(req, res);
};

export default allowCors;

However, the same issue persists and I am unable to comprehend the error

Answer 8

import { ApolloServer } from "apollo-server-micro";
import allowCors from "../../../utils/cors";
import typeDefs from "../../../graphql/schemas";
import resolvers from "../../../graphql/requests";

const apolloServer = new ApolloServer({
  typeDefs: typeDefs,
  resolvers,

  // playground: true,
  introspection: true,
  context: ({ req }) => {
    return {
      headers: req.headers,
    };
  },
  cache: "bounded",
  // plugins: [ApolloServerPluginLandingPageGraphQLPlayground()],
});

const startServer = apolloServer.start();

async function handler(req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*");

  await startServer;
  await apolloServer.createHandler({
    path: "/api/graphql",
  })(req, res);
}

export const config = {
  api: {
    bodyParser: false,
  },
};

export default allowCors(handler);

utils/cors.js

const allowCors = (fn) => async (req, res) => {
  res.setHeader("Access-Control-Allow-Credentials", true);
  res.setHeader("Access-Control-Allow-Origin", "*");
  // another common pattern
  // res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET,OPTIONS,PATCH,DELETE,POST,PUT"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
  );
  if (req.method === "OPTIONS") {
    res.status(200).end();
    return;
  }
  return await fn(req, res);
};

export default allowCors;

However, the same issue persists and I am unable to comprehend the error

CORS blocking is preventing Next JS due to lack of HTTP OK response status

Answer №1

`/api/graphql`

/utils/cors

Answer №2

Answer №3

Answer №4

Similar questions

The issue arises when trying to set headers after they have already been sent in the Google Maps Places API and Express

Travis CI: encountering difficulties while attempting to update npm to a newer version

Error 401: Unauthorized access detected while handling a Webhook

Tips for submitting a request following a change in the variable

Can you explain the distinction between <div /> and <div></div> or <Component /> and <Component> </Component>?

Tips on obtaining a Firebase ID

Dockerized NextJS and Strapi setup

Field must have a base type specified to proceed

When switching between npm and ionic in various directories, the versions displayed may vary

NextAuth asynchronous function completion occurring before value is returned

Has anyone been able to establish a successful connection between a NodeJS project and SQL Server using AAD-Managed identity?

Encountering a display issue within a port using Express

What methods are there for incorporating a sub-component from a React client into a React server component?

Is there a way to access environment variables within npm or package.json configuration?

Top ways to configure dynamic route parameter in express

Encountered a problem when attempting to establish a socket connection with node js express and socket.io within my project directory on a

Node.js vulnerability labeled as CVE-2021-38628

Managing registration with an existing email address in Supabase

Setting up Node and NPM on Laradock can streamline your development

Changing the structure of a JSON array in JavaScript