• Documentation
  • /
  • Next.js Firebase
  • /
  • Enable CORS

Enable CORS

Enabling CORS is required if you want to allow serving HTTP request to external clients. For example, if you want to expose an API to some consumers: JS libraries, headless clients, and so on.

To enable CORS, you can use the with-cors middleware in two different ways.

You can simply call it in your handler:

import withCors from '~/core/middleware/with-cors';

function apiHandler(
  req: NextApiRequest,
  res: NextApiResponse
) {
    withCors(res);

    // your logic
}

export default apiHandler;

Alternatively, you can use it with withPipe:

import withCors from '~/core/middleware/with-cors';

function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
   // your logic
}

export default withPipe(
  withCors,
  apiHandler
);

Additionally, you need to respond to OPTIONS request appropriately.

export function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  withCors(res);

  if (req.method === `OPTIONS`) {
     // add the method you want to allow
     res.setHeader('Access-Control-Allow-Methods', 'GET');

     return res.end();
  }
}

Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor