Module Middleware/CORS

The CORS middleware simplifies the setup of CORS headers. Internally it uses the same CORS utils exported from remix-utils/cors.

To use it, first create a CORS middleware instance:

import { createCorsMiddleware } from "remix-utils/middleware/cors";

export const [corsMiddleware] = createCorsMiddleware();
Copy

Add the corsMiddleware to the middleware array in the route where you want to configure CORS, use it in your app/root.tsx file to apply it globally:

import { corsMiddleware } from "~/middleware/cors.server";

export const middleware: Route.MiddlewareFunction[] = [corsMiddleware];
Copy

Now, every request will have the CORS headers set.

You can customize the CORS middleware by passing an options object to the createCorsMiddleware function.

The options lets you configure the CORS headers, e.g. origin, methods, allowedHeaders, etc.

import { createCorsMiddleware } from "remix-utils/middleware/cors";

export const [corsMiddleware] = createCorsMiddleware({
  origin: "https://example.com",
  methods: ["GET", "POST"],
  allowedHeaders: ["Content-Type", "Authorization"],
  exposedHeaders: ["X-My-Custom-Header"],
  maxAge: 3600,
  credentials: true,
});
Copy

The accepted options are the same as those accepted by the cors util.