Vercel & CORS Problem

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 1. I tried adding a vercel.json file at the root of my project: https://vercel.com/guides/how-to-enable-cors#enabling-cors-using%C2%A0vercel.json 2. 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',
    },
  });
}

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

3. 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" },
});

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.

2 Replies

sh03•4w ago

Is it a single app (both frontend & backend) on Vercel? If so why is it referencing localhost:3000? Sounds like you are trying to call the vercel app from a local app.

ChrisThornhamOP•4w ago

The app on vercel is acting as a backend for mobile devices. I added the app to Netlify and everything worked perfectly. It must be something to do with Vercel’s servers.

Gaming

Programming

Vercel & CORS Problem