Bun.serve not supporting CORS

[satyavh]

What is the problem this feature would solve?

Handle CORS, which is one of the basics of a HTTP server. Without CORS settings Bun.serve is kind of useless.

What is the feature you are proposing to solve the problem?

Support CORS settings

What alternatives have you considered?

Fall back to Express

[sudityashrivastav]

Go with your alternative

[controversial]

Bun.serve absolutely supports CORS—just add CORS headers to your response:

Bun.serve({
  fetch(req) {
    const res = new Response('hello world');
    res.headers.set('Access-Control-Allow-Origin', '*');
    res.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    // add Access-Control-Allow-Headers if needed
    return res;
  },
});

Bun.serve is an intentionally minimal API, closely following web standards (fetch, Request, and Response). You don’t need a package or a built-in setting just to add 1–3 headers to your server responses!

[Electroid]

As @controversial mentioned, CORS is possible using Bun.serve.

[lliamscholtz]

If you've added these headers to Bun.serve:

res.headers.set('Access-Control-Allow-Origin', '*');
res.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

and are still getting CORS issues via a browser your Preflight OPTIONS request might still be getting blocked.

To solve this, I created a catch-all preflight requests method handler in my server.ts file:

const CORS_HEADERS = {
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'OPTIONS, POST',
        'Access-Control-Allow-Headers': 'Content-Type',
    },
};

Bun.serve({
    async fetch(req) {

        // Handle CORS preflight requests
        if (req.method === 'OPTIONS') {
            const res = new Response('Departed', CORS_HEADERS);
            return res;
        }
        
        const url = new URL(req.url);
        if (url.pathname === '/' && req.method === 'POST') {
            const { foo } = await req.json();      
            . . .
            return new Response(
                JSON.stringify({ foo: bar }),
                CORS_HEADERS
            );

[sWalbrun]

You approach @lliamscholtz did work out for me with a slight change as the client had a
Access-Control-Request-Headers: Content-Type, Authorization as further request header. In this case I had to slightly adjust the code:

const CORS_HEADERS = {
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'OPTIONS, POST',
        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
};

Bun.serve({
    async fetch(req) {

        // Handle CORS preflight requests
        if (req.method === 'OPTIONS') {
            const res = new Response('Departed', CORS_HEADERS);
            return res;
        }
        
        const url = new URL(req.url);
        if (url.pathname === '/' && req.method === 'POST') {
            const { foo } = await req.json();      
            . . .
            return new Response(
                JSON.stringify({ foo: bar }),
                CORS_HEADERS
            );

[lmachens]

Or extend the Response:

import { BodyInit, ResponseInit } from "undici-types";

export class ClientResponse extends Response {
  constructor(body?: BodyInit, init?: ResponseInit) {
    super(body, init);
    this.headers.set("Access-Control-Allow-Origin", "*");
    this.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET");
    this.headers.set("Access-Control-Allow-Headers", "Content-Type");
  }
}