Vercel & CORS Problem | SolidJS | Page 1

Does anyone know how to configure CORS on Vercel with SolidStart? I keep getting...

Access to fetch at 'https://my-vercel-url.app/api/todos/get-todos' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

What I've Tried

I tried adding a vercel.json file at the root of my project: https://vercel.com/guides/how-to-enable-cors#enabling-cors-using vercel.json
I've tried adding headers to my API endpoint:

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',
    },
  });
}

I've set my server to "vercel" in app.config.ts

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  ssr: false,
  server: { preset: "vercel" },
});

And nothing.

Any help would be appreciated.

Chris

How to Enable CORS on Vercel

Learn how to enable CORS in a single Node.js Serverless Function, in a Next.js app, and using vercel.json.

#Vercel & CORS Problem