sleepless•3mo ago

http endpoints, have to define twice to handle OPTIONS / preflight requests?

For an http POST endpoint do I have to define the same endpoint also with method OPTIONS to handle preflight requests? Otherwise I get a 404 options even thought I'm setting method: "POST" in my fetch request. ended up with something like this

  // Handle CORS preflight requests
  if (request.method === "OPTIONS") {
    return new Response(null, {
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type",
      },
    });
  }

  // Handle CORS preflight requests
  if (request.method === "OPTIONS") {
    return new Response(null, {
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type",
      },
    });
  }

Not really an issue just figured I'd ask for learning purposes, I think I've vaguely figured out what's going on but took a while to figure out why it wasn't working

3 Replies

Convex Bot•3mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

erquhart•3mo ago

Use the cors helper: https://github.com/get-convex/convex-helpers/blob/main/packages/convex-helpers/README.md#cors-support-for-httprouter

sleeplessOP•3mo ago

lovely thanks So I'm trying this

const http = httpRouter();
betterAuthComponent.registerRoutes(http, createAuth);

// CORS router for endpoints that need CORS support
const cors = corsRouter(http, {
  allowedOrigins: ["*"],
  allowedHeaders: ["Content-Type", "X-Signature"],
});

// LemonSqueezy webhook endpoint with CORS support
cors.route({
  path: "/api/lemonsqueezy/webhook",
  method: "POST",
  handler: lemonsqueezyWebhook,
});

const http = httpRouter();
betterAuthComponent.registerRoutes(http, createAuth);

// CORS router for endpoints that need CORS support
const cors = corsRouter(http, {
  allowedOrigins: ["*"],
  allowedHeaders: ["Content-Type", "X-Signature"],
});

// LemonSqueezy webhook endpoint with CORS support
cors.route({
  path: "/api/lemonsqueezy/webhook",
  method: "POST",
  handler: lemonsqueezyWebhook,
});

I can see it generated an OPTIONS for /api/lemonsqueezy/webhook But I get a 404 when I try to hit https://myproject.convex.cloud/api/lemonsqueezy/webhook Any ideas what I'm missing? Oh maybe I need to use .site hold on, yeah that works I think

http endpoints, have to define twice to handle OPTIONS / preflight requests?

Did you find this page helpful?