Enable CORS | Remix Firebase SaaS Kit

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.

The code to enable CORS in Remix is very simple. In fact, you can enable it using the following code:

tsx

function withCors() {
  const headers = new Headers();
  headers.append('Access-Control-Allow-Origin', '*');
  headers.append(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, referer-path'
  );
  return headers;
}

Additionally, you need to handle OPTIONS requests appropriately.

tsx

if (request.method === `OPTIONS`) {
  return new Response(null, {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, HEAD, POST, PUT, DELETE',
    },
  });
}

In your Makerkit codebase, this function is already available in the ~/core/middleware/with-cors.ts file.

To enable CORS, you can simply call it in your handler. If it fails, it will throw an exception with the appropriate HTTP status code.

tsx

import withCors from '~/core/middleware/with-cors';
export const action: ActionFunction = async ({request}) => {
  withCors(res);
  // your logic
}
export default apiHandler;

Additionally, you need to respond to OPTIONS request appropriately.

tsx

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();
  }
}