How to deal with OPTIONS requests in BFF?

[brophdawg11]

Discussed in #5067

^{Originally posted by ligiaandreica January 11, 2023}
I am using remix as BFF, implementation based on docs. The client (on a different domain) calls BFF to get some data and then the requests go to downstream APIs. Basically, it's the preflight OPTIONS request to verify the client can do the GET.

This was working fine with some remix-utils cors setup until v1.8.0 of remix.

Started getting Error: Invalid request method "OPTIONS" once I've upgraded from v1.7.6. This error seems expected according to the release docs.

ErrorResponse {
  status: 405,
  statusText: 'Method Not Allowed',
  internal: true,
  data: 'Error: Invalid request method "OPTIONS"',
  error: Error: Invalid request method "OPTIONS" ...
}

Am I missing some configuration or is this a new limitation?
@jacob-ebey or @brophdawg11 could you please advise as this is part of #4385?

[ezg27]

Was about to post this in the original discussion but just seen this issue pop up 😄.

For context this doesn't break anything directly in our app currently but was an interesting find in our logs this afternoon - happened upon the original discussion while doing some digging.

We're seeing this same error on Vercel preview deployments - the scripts for their new Comments feature that get injected into the page make an OPTIONS request to the current origin on startup:

This returns a 405 response with a similar stack trace as in @ligiaandreica's original post:

2023-01-13T17:58:10.034Z	4fc81c7b-3f98-46d8-8cf1-2bb103a4c57a	ERROR	Error: Invalid request method "OPTIONS"
    at getInternalRouterError (/var/task/apps/admin/api/index.js:73710:997)
    at Object.query (/var/task/apps/admin/api/index.js:73246:24)
    at handleDocumentRequestRR (/var/task/apps/admin/api/index.js:74244:40)
    at /var/task/apps/admin/api/index.js:74198:223
    at Server.<anonymous> (/var/task/apps/admin/api/index.js:84073:145)
    at Server.emit (node:events:527:28)
    at parserOnIncoming (node:_http_server:956:12)
    at HTTPParser.parserOnHeadersComplete (node:_http_common:128:17)

This points to the following isValidMethod check in the React Router source that's called from within Remix's handleDocumentRequestRR - OPTIONS doesn't seem to be included in the Set that function checks against: https://github.com/remix-run/react-router/blob/4f3ad7b96e6e0228cc952cd7eafe2c265c7393c7/packages/router/router.ts#L2153.

The Vercel script seems to fail gracefully and so doesn't tank the rest of the page, but adding the info to this issue as it looks like this might have some impact beyond Remix BFF usage.

The error was originally found on a Remix v1.8.2 app - I've created a minimal reproduction of what the Vercel script is doing here with the latest version of Remix (v1.10.0), which throws the same error: https://github.com/ezg27/remix-options-error-repro

[machour]

Confirming the issue with the Vercel widget, but I think the problem originates here: https://github.com/remix-run/react-router/blob/main/packages/router/router.ts#L2073

[Klukies]

While we don't have this issue in our production environment due to an API gateway, locally we also have this issue.
Since we're using remix-run/express, we're using the cors package in our server.js file to handle cors.

This works for our use case:

if (process.env.NODE_ENV === 'development') {
  app.options('/api/*', cors());
}

[brophdawg11]

This should be available in 1.11.0-pre.1 shortly once CI finishes if you want to confirm it fixes your issue 👍

[brophdawg11]

Released in 1.11.0

[ligiaandreica]

Thank you for the quick fix. 🎉 It's working fine for client -> BFF use case.

[vivere-dally]

I am still facing this issue even though I enabled cors:

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { session, admin } = await authenticate.admin(request);

  // explicitly handle options
  if (request.method === "OPTIONS") {
    return await cors(request, json(null));
  }

  // Some logic
  return await cors(request, json(someData));
};

I get an exception in the router package when I receive a request:

ErrorResponseImpl {
status: 405,
statusText: 'Method Not Allowed',
internal: true,
data: 'Error: Invalid request method "OPTIONS"',
error: Error: Invalid request method "OPTIONS"
at getInternalRouterError (/app/node_modules/@remix-run/router/router.ts:5402:5)
at Object.query (/app/node_modules/@remix-run/router/router.ts:3493:19)
at handleDocumentRequest (/app/node_modules/@remix-run/server-runtime/dist/server.js:268:35)
at requestHandler (/app/node_modules/@remix-run/server-runtime/dist/server.js:160:24)
at /app/node_modules/@remix-run/express/dist/server.js:41:28
at processTicksAndRejections (node:internal/process/task_queues:95:5)
}

[muco-rolle]

Same for me. I'm still getting this error. Any fix ?

[machour]

@muco-rolle This issue was closed two years ago. Please submit a new one providing all the information needed to reproduce it.