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