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.
The code to enable CORS in Remix is very simple. In fact, you can enable it using the following code:
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.
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.
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.
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(); }}