How to Enable CORS on a Sveltekit Standalone Endpoint?

Question

I'm building an embed that needs access to a sveltkit endpoint from any origin.

If I was using express I would simply use the cors middleware.

I'm curious if there is a way to enable CORS on sveltkit endpoints so I don't need to spin up another service.

Some things I've tried so far:

• Returning 'Access-Control-Allow-Origin': '*' from the get handle in the endpoint

• Overriding the OPTIONS http method (never seems to get called)

• I saw this reddit post but it seems outdated.

Mammoth

Answer 1

I figured it out!

The answer will be different depending on the sveltkit adapter you are using. In my case I'm using the node adapter and can actually serve the svelte app from express and enable the cors middleware there:

// this is file exported by the node adapter plugin
import { handler } from './build/handler.js'; 
import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors());

// add a route that lives separately from the SvelteKit app 
app.get('/healthcheck', (req, res) => { res.end('ok'); });

// let SvelteKit handle everything else, including serving prerendered pages and static assets app.use(handler);

app.listen(3000, () => { console.log('listening on port 3000'); });

This is a modification of the "custom server" example in the documentation of the node adapter: https://kit.svelte.dev/docs/adapter-node#custom-server

Mammoth

Answer 2

I encountered a similar issue but couldn't use the express workaround.

This however has worked for me:

  const response = new Response(<YOUR_RESPONSE>);
  
  response.headers.append('Access-Control-Allow-Origin', <YOUR_URL>);

  return response;

Sveltekit: https://kit.svelte.dev/docs/web-standards#fetch-apis-headers

MDN: https://developer.mozilla.org/en-US/docs/Web/API/Headers

Cook

Answer 3

If the sveltekit endpoint doesn't receive an OPTIONS request, then your issue appears to be coming from the web server.

For anyone else, this worked for me:

export async function OPTIONS() {
  return new Response(null, {
    headers: {
      'Access-Control-Allow-Origin': '*', // Specify the url you wish to permit
      'Access-Control-Allow-Methods': 'POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    },
  })
}

Ornis