Help: Preflight OPTIONS Requests In SolidStart. I'm Lost!

The docs give the following examples for methods in API routes.

export function GET() {
  // ...
}

export function POST() {
  // ...
}

export function PATCH() {
  // ...
}

export function DELETE() {
  // ...
}

export function GET() {
  // ...
}

export function POST() {
  // ...
}

export function PATCH() {
  // ...
}

export function DELETE() {
  // ...
}

Does OPTIONS() also exist for preflight requests? Implemented something like this:

export async function OPTIONS() {
  return new Response(null, {
    status: 204, // No Content
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type",
      "Access-Control-Max-Age": "86400", // Cache preflight response for 24 hours
    },
  });
}

export async function OPTIONS() {
  return new Response(null, {
    status: 204, // No Content
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type",
      "Access-Control-Max-Age": "86400", // Cache preflight response for 24 hours
    },
  });
}

13 Replies

ChrisThornhamOP•2mo ago

Ok.. I've kept digging. I'm using Netlify to host the backend and using a mobile client to call the API. This works:

import { APIEvent } from "@solidjs/start/server";

export async function GET({ request }: APIEvent) {
  // Fetch todos from external API
  const response = await fetch("https://jsonplaceholder.typicode.com/todos");
  const todos = await response.json();

  // Create a new response with CORS headers
  return new Response(JSON.stringify(todos), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*', // Allows all origins (use carefully in production)
      'Access-Control-Allow-Methods': 'GET,HEAD,POST,OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    },
  });
}

import { APIEvent } from "@solidjs/start/server";

export async function GET({ request }: APIEvent) {
  // Fetch todos from external API
  const response = await fetch("https://jsonplaceholder.typicode.com/todos");
  const todos = await response.json();

  // Create a new response with CORS headers
  return new Response(JSON.stringify(todos), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*', // Allows all origins (use carefully in production)
      'Access-Control-Allow-Methods': 'GET,HEAD,POST,OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    },
  });
}

The POST request returns a "Success!" message. But when I send and OPTIONS request to this endpoint, I get a HTML page returned and a 200 status. I should be getting a 204.

import { APIEvent } from "@solidjs/start/server";

export async function OPTIONS({ request }: APIEvent) {
  return new Response(null, {
    status: 204, // No content
    headers: {
      "Access-Control-Allow-Origin": "*", // Allow all origins (adjust for production)
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
    },
  });
}

export async function POST({ request }: APIEvent) {
  const body = await request.json();
  // Handle your POST logic here
  return new Response(JSON.stringify({ message: "Success!" }), {
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
    },
  });
}

import { APIEvent } from "@solidjs/start/server";

export async function OPTIONS({ request }: APIEvent) {
  return new Response(null, {
    status: 204, // No content
    headers: {
      "Access-Control-Allow-Origin": "*", // Allow all origins (adjust for production)
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
    },
  });
}

export async function POST({ request }: APIEvent) {
  const body = await request.json();
  // Handle your POST logic here
  return new Response(JSON.stringify({ message: "Success!" }), {
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
    },
  });
}

So it appears I don't know how to handle OPTIONS requests in SolidStart. What am I missing? How do I handle preflight OPTIONS requests in SolidStart?

Brendonovich•2mo ago

hmm afaict OPTIONS isn't exposed

Brendonovich•2mo ago

for now you could handle OPTIONS requests in a middleware, it'd probably be worth adding OPTIONS to that method list long term

Madaxen86•2mo ago

I found this: https://answers.netlify.com/t/cors-and-netlify-api-requests-not-working-on-deployment/48538/4 and this is probably better https://answers.netlify.com/t/handling-cors-preflight-requests/42724/5

Netlify Support Forums

CORs and Netlify - API requests not working on deployment

Thank you @hrishikesh … what is a proxy rewrite though? I looked at the Netlify docs and I got this: Proxy to another service Similar to how you can rewrite paths like /* to /index.html , you can also set up rules to let parts of your site proxy to external services. Let’s say you need to communicate from a single-page app with an API on htt...

Netlify Support Forums

Handling CORS preflight requests

Hello @ravelysid, check out this example I made for you: I tested the deployed URL from my example with the fetch request you posted above and it worked fine.

ChrisThornhamOP•2mo ago

That would definitely be REALLY helpful. I can’t get any of my POST requests working. I find the middleware docs to be pretty sparse. Can you point to any examples or references that I could use to set up OPTIONS requests in middleware? Thanks @Madaxen86 I found those as well and set up the netlify.toml file as suggested. Unfortunately, I’m still getting blocked by the preflight OPTIONS request.

Brendonovich•2mo ago

a middleware like this should work

import { createMiddleware } from "@solidjs/start/middleware";

export default createMiddleware({
  onRequest(event) {
    if (event.request.method === "OPTIONS") {
      return new Response(null, {
        status: 204, // No Content
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type",
        },
      });
    }
  },
});

import { createMiddleware } from "@solidjs/start/middleware";

export default createMiddleware({
  onRequest(event) {
    if (event.request.method === "OPTIONS") {
      return new Response(null, {
        status: 204, // No Content
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type",
        },
      });
    }
  },
});

put it in a file and point your config at it with the middleware field https://docs.solidjs.com/solid-start/advanced/middleware#middleware

ChrisThornhamOP•2mo ago

Thank you @Brendonovich ! Let me work on this. @Brendonovich you're a legend! It works! I can't thank you enough. Some version of your example would be a wonderful addition to the API Routes page in the SolidStart docs.

Brendonovich•2mo ago

keep in mind that middlware will run for every request, not just the specific route. you'd need to do another check to handle that also using middleware for that ideally shouldn't be necessary, adding an OPTIONS handler would be ideal

ChrisThornhamOP•2mo ago

Yes, I agree that adding an OPTIONS handler is the best solution. Just to clarify, you're saying that I should check the route inside the middleware before executing the if statement on the request?

Brendonovich•2mo ago

If that's the behaviour you want then yeah

ChrisThornhamOP•2mo ago

Ok. Thanks. Should I submit an official request somewhere to add an OPTIONS handler? I don't mind helping with that.

Brendonovich•2mo ago

If you want to make a PR i think OPTIONS just needs to be added to the HTTP_METHODS array

ChrisThornhamOP•2mo ago

I'm on it.

Gaming

Programming

Help: Preflight OPTIONS Requests In SolidStart. I'm Lost!

Did you find this page helpful?