CORS Error When Making POST Request to Action (React Router v7 - Framework Mode)

[Nathami-n]

Hi everyone ,

I'm working on a project using React Router v7 in framework mode (formerly part of Remix), and I’m encountering a CORS error when making a POST request to an action endpoint in production.
Initially I did not have a custom node server but after trying to set the response headers to allow all origins to no avail I sought to try a custom express server which does not equally work

---

Setup Overview

• React Router v7 (Framework mode)
• Custom Express server
• Vite for development
• TypeScript
• Dev tunnels (to simulate production environment)

---

Express Server Configuration

Here's a simplified version of my server.ts:

import express from "express";
import cors from "cors";
import compression from "compression";
import morgan from "morgan";

const app = express();
app.use(cors({ origin: "*", credentials: true }));
app.use(compression());
app.use(morgan("dev"));

if (process.env.NODE_ENV === "development") {
  const vite = await import("vite");
  const viteDevServer = await vite.createServer({ server: { middlewareMode: true } });

  app.use(viteDevServer.middlewares);
  app.use(async (req, res, next) => {
    try {
      const source = await viteDevServer.ssrLoadModule("./server/app.ts");
      return await source.app(req, res, next);
    } catch (error) {
      viteDevServer.ssrFixStacktrace?.(error);
      next(error);
    }
  });
} else {
  app.use(
    "/assets",
    express.static("build/client/assets", { immutable: true, maxAge: "1y" })
  );
  app.use(express.static("build/client", { maxAge: "1h" }));
  app.use(await import("./build/server/index.js").then((mod) => mod.app));
}

app.listen(process.env.PORT || 5500, () => {
  console.log("Server is running...");
});

In my webhook endpoint

import type { Route } from "./+types/test.api.webhook";

export const action = async ({ request }: Route.ActionArgs) => {
  // Handle preflight
  if (request.method === "OPTIONS") {
    return new Response(null, {
      status: 204,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type",
      },
    });
  }

  console.log("@webhooks data", request);

  return new Response(JSON.stringify({ success: true }), {
    status: 200,
    headers: {
      "Access-Control-Allow-Origin": "*", 
      "Content-Type": "application/json",
    },
  });
};

[staurand]

@Nathami-n
Maybe too late for you, but in my case I've been able to manage that through the loader:
Pseudo code:

export const loader = async ({ request }) => {
  // Handle preflight
  if (request.method === "OPTIONS") {
    return new Response(null, {
      status: 204,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type",
      },
    });
  }
  ....
}
` 

[Nathami-n]

Hello! Thank you, I actually managed to get it working using the cors package from remix utils

[kyrylo-soulandwolf]

You can use a handy utility in remix-utils package that lets you easily manage CORS headers