How to configure the CORSPlugin properly?

[SpraxDev]

Hi,

I was looking at the CORSPlugin for RPCHandler and had it 'enabled' with default options (plugins: [new oRpcPlugins.CORSPlugin()}).

I was looking into configuring it properly now, but the documentation does not explain what the options are for, and even looks like you don't need to configure anything?
I expected the origin option to act as an allowlist of allowed origins, but it doesn't seem to do anything.

When configuring http://example.com as my origin, and visiting my app at http://localhost:8080, POST requests still succeed (A Access-Control-Allow-Origin response header is sent, with the app's origin instead of the configured one).
When instead configuring a method as origin, I can log the origin of the request, but oRPC does not seem to check for it?
Am I expected to throw my own Exception?

Thanks for any advice and Happy New Year 🎇

[dosubot[bot]]

Hi @SpraxDev! I'm Dosu and I’m helping the orpc team.

The CORSPlugin in oRPC is mainly responsible for setting CORS headers on responses, not for blocking or rejecting requests from disallowed origins. The key options you can configure are: origin (which can be a string, array, or function to allow specific origins), allowMethods, allowHeaders, maxAge, credentials, exposeHeaders, and timingOrigin [source].

The origin option acts as an allowlist for the Access-Control-Allow-Origin header. If you set origin: "http://example.com", only requests from that origin will get the header set. Requests from other origins will not have the header, but the request will still be processed—oRPC does not block or throw for disallowed origins [source]. Browsers enforce CORS by blocking responses without the header, but server-side POSTs or non-browser clients will still succeed.

If you want to strictly block requests from disallowed origins (e.g., for security or API rate limiting), you need to add your own logic—such as a plugin or interceptor that checks the origin and throws an exception if it's not allowed.

Example for a strict allowlist:

const allowedOrigins = ["http://example.com"];
const corsPlugin = new oRpcPlugins.CORSPlugin({
  origin: (origin) => allowedOrigins.includes(origin) ? origin : ""
});
// To strictly block, add a rootInterceptor before CORSPlugin:
const blockDisallowedOrigins = async (opts) => {
  const origin = opts.request.headers.origin;
  if (!allowedOrigins.includes(origin)) {
    throw new Error("Origin not allowed");
  }
  return opts.next();
};
handlerOptions.plugins = [
  { rootInterceptors: [blockDisallowedOrigins] },
  corsPlugin
];

This way, you get both the correct CORS headers and strict enforcement.

Let me know if you want a more detailed example or have questions about other options!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[SpraxDev]

I feel stupid ,_,
Took me another 7 minutes where I decided to do some more debugging...

I think my dev setup (Vite or the frontend framework) seem to overwrite the CORS header(s) set by oRPC.

My bad.