new Elysia()
    .use(
      logger({
        level: 'info',
      })
    )
    .use(
      cors({
        origin: /.*\.saltyaom\.com$/,
      })
    )
    .use(swagger())
    .get('/', () => 'Hello World')
    .get(
      '/finish-match',
      async ({ query }) => {
        const gain = 50
        const result = await addExpToUser(query.userId, gain)
        const userDB = result[0]
        const totalExp = (userDB.exp || 0) + gain

        const channel = guild.channels.cache.find(
          (x) => x.id === '1216638376023818350' // game channel
        ) // bot -test

        if (channel?.type === ChannelType.GuildText) {
          channel.send({
            content: `${userDB.name} baru menyelesaikan 1 match. +50 EXP`,
          })
        }
      },
      {
        query: t.Object({
          userId: t.String(),
          roomId: t.String(),
        }),
      }
    )

Adding

    .use(
      cors({
        origin: /.*\.saltyaom\.com$/,
      })
    )

messed up the typescript typing. Removing it, fixed the issue. Let me know if there's any other info I can provide

{
  "name": "@oneayah/simple-backend",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "bun --watch server.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@bogeychan/elysia-logger": "^0.0.17",
    "@elysiajs/cors": "^1.0.2",
    "@elysiajs/swagger": "^0.8.5",
    "@oneayah/auth": "workspace:*",
    "@oneayah/db": "workspace:*",
    "@sinclair/typebox": "^0.32.15",
    "arctic": "^1.2.1",
    "discord.js": "^14.14.1",
    "drizzle-orm": "^0.29.3",
    "elysia": "^0.8.17"
  },
  "devDependencies": {
    "@types/pg": "^8.10.9"
  }
}

Hi, how can I resolve this CORS error? When set as a string or regex, this will show an error that says the origin prop is an empty string.

Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains the invalid value ''. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

But when I use other approaches like boolean values or customize logic with functions, it will cause:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is my current usage:

new Elysia()
  .use(
    cors({
      origin: ({ headers }) => {
        const origin = headers.get("origin");
        return origin === ALLOWED_ORIGIN;
      },
      allowedHeaders: ["Content-Type", "Accept", "Authorization"],
      methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
    }),
  )
  .group("/api", (app) => app.use(auth).use(user))
  .listen(3000);

Node.js’s Response constructor throws an error when response body is not null (e.g. empty string):

new Response('', { status: 204 })
/*
Uncaught TypeError: Response constructor: Invalid response status code 204
    at webidl.errors.exception (node:internal/deps/undici/undici:1636:14)
    at initializeResponse (node:internal/deps/undici/undici:5754:31)
    at new Response (node:internal/deps/undici/undici:5548:9)
*/

This is what @elysiajs/cors does:

• elysia-cors/src/index.ts

  Lines 265 to 267 in 7ce6d9a

  	return new Response('', {
  	status: 204
  	})

• elysia-cors/src/index.ts

  Lines 281 to 283 in 7ce6d9a

  	return new Response('', {
  	status: 204
  	})

Solution is to set body to null instead of ''.

Dependency versions

    "@elysiajs/cors": "1.0.0-beta.0",
    "elysia": "1.0.0-beta.1",

The plugin's documentation specifies that the default allowed methods is basically the * wildcard. However when developing my API with this plugin I encountered CORS issues when trying to call a route using the DELETE method:

import { Elysia } from "elysia";
import { cors } from "@elysiajs/cors";

import * as gql from "./gql";
import * as media from "./media";

new Elysia()
	.use(cors())
	.group("/api", (app) =>
		app
			.post("/gql", gql.POST)
			.group("/media", (app) =>
				app
					.get("", media.GET)
					.post("", media.POST)
					.delete("", media.DELETE), // This one
			),
	)
	.listen(3000);

Fixed it by setting the methods parameter to *:

import { Elysia } from "elysia";
import { cors } from "@elysiajs/cors";

import * as gql from "./gql";
import * as media from "./media";

new Elysia()
	.use(cors({ methods: "*" })) // Here
	.group("/api", (app) =>
		app
			.post("/gql", gql.POST)
			.group("/media", (app) =>
				app
					.get("", media.GET)
					.post("", media.POST)
					.delete("", media.DELETE),
			),
	)
	.listen(3000);

Not a huge problem but kinda annoying

When setting noUncheckedIndexedAccess to true in a project consuming this library, type errors ensue:

node_modules/@elysiajs/cors/src/index.ts:211:49 - error TS2345: Argument of type 'Origin | undefined' is not assignable to parameter of type 'Origin'.
  Type 'undefined' is not assignable to type 'Origin'.

211                     const value = processOrigin(origins[i], request, from)
                                                    ~~~~~~~~~~

The example code underneath should fetch cookies from my backend thats on a different origin than my front end. However i get a error "Access to fetch at 'http://localhost:1234/cookies' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response." However if i understand the doc correct elysia-cors should allow it by default.

This is a example i made to narrow down the problem
Frontend
Open with live server - VS code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="post">
        <input type="text" placeholder="username" name="username">
        <input type="text" placeholder="password" name="password">
        <button>submit</button>
    </form>
    <script>
        document.querySelector("form").addEventListener("submit", (e) => {
            e.preventDefault();
            console.log("submitting");
            document.cookie = `username=${document.querySelector("input[name='username']").value}`;
            document.cookie = `password=${document.querySelector("input[name='password']").value}`;

            fetch("http://localhost:1234/cookies", {
                method: "GET",
                mode: "cors",
                headers: {
                    'Content-Type': 'application/json'
                },
                credentials: "include"
            })
            .then((response) => {
                console.log(response);
            });
        })
    </script>
</body>
</html>

Backend

import Elysia from "elysia";
import cors from "@elysiajs/cors";

const app = new Elysia();

app.use(
    cors({
        origin: true,
        methods: "*",
        allowedHeaders: "*",
        exposedHeaders: "*",
        credentials: true,
        maxAge: 50000,
        preflight: true,
    })
);

app.get("/cookies", ({ cookie: { username, password, icecream } }) => {
    icecream.value = "chocolate";
    console.log(username + ":" + password);
    return "you got me!";
});

app.listen(1234);
console.log("Server up and running at http://localhost:1234");

In addition to whats is shown here i have tried

• app.options("*", cors());
• To use firefox (my default is chrome )
• Fetching the local network address

Dependancies
─ @elysiajs/[email protected]
├── [email protected]
└── [email protected]

I am getting this error when using the plugin with Elysia

Versions

    "@elysiajs/cors": "^0.8.0",
    "@elysiajs/swagger": "^0.7.4",
    "elysia": "latest",

elysia: 0.7.12
nodejs: 18.14
@bogeychan/elysia-polyfills: 0.6.1
browser: Google Chrome Version 116.0.5845.187 (Official Build) (x86_64)

Reading MDN docs about OPTIONS gives an example that uses 204 as the response status code, other browser implementations expect OPTIONS response to return status code of ok or 200 as mentioned in the same document.

Furthermore RFC9110 section 15.3.1 states that a response status code of 200 can be used for OPTIONS response. With that said a CORS error pops up when using default elysia-cors options.

import { Elysia } from 'elysia'

const routes = new Elysia()
  .use(cors())
  .post('/test', async ({ body }) => {
    console.log(body)
    return {}
  })

When sending a post request to /test, the browser receives a response status of 204 and decides to block the request due to CORS policy:

Access to XMLHttpRequest at 'https://api.website.com/test' from origin 'https://app.website.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Also receives a TypeError:

TypeError: Response constructor: Invalid response status code 204
-- at webidl.errors.exception (node:internal/deps/undici/undici:1265:14)
-- at initializeResponse (node:internal/deps/undici/undici:6845:31)
-- at new Response (node:internal/deps/undici/undici:6654:9)

There's a work around with this by using Elysia instance's .options method:

import { Elysia } from 'elysia'

const routes = new Elysia()
  .use(cors())
  .options('/test', ({ set }) => {
    set.status = "OK"
  })
  .post('/test', async ({ body }) => {
    console.log(body)
    return {}
  })

It works but it is quite cumbersome. What do you guys think? Perhaps we should we default to status 200 instead.

Setting up cors with multiple origin doesn't work it returns multiple Access-Control-Allow-Origin when it should only return caller

Access to fetch at 'http://localhost:3000/experiences' from origin 'http://127.0.0.1:5173' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://127.0.0.1:5173, http://localhost:4000', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

@elysiajs/cors@^0.7.0": 
  version "0.7.0"
  resolved "https://registry.npmjs.org/@elysiajs/cors/-/cors-0.7.0.tgz"
  integrity sha512-BOR7FyIdE5WE+LzFBSOY/yTnl8+56UiIaSanQr61gL1UGbqsNRqR+L1XOV7GPMsxiWBY+m/1nnXYlIvAZ1NmWg==
  
elysia@^0.7.12: 
  version "0.7.12"
  resolved "https://registry.npmjs.org/elysia/-/elysia-0.7.12.tgz"
  integrity sha512-2dHTLgrkWdgt81zJvJD6nMWDXp77NcU/L80nIl8VjzQVtkvPQ26/dbEze+XMQ8stKcI4cv5f+S02JV3rV67DmA==
  dependencies: 
    "@sinclair/typebox" "^0.31.15"
    cookie "^0.5.0"
    cookie-signature "^1.2.1"
    eventemitter3 "^5.0.1"
    fast-querystring "^1.1.2"
    memoirist "0.1.4"
    openapi-types "^12.1.3"

When using fetch with credentials to make a request to a separated backend (other url/port), everything works perfectly with Firefox with default configuration (use(cors()))

On Chrome, it seems we need to specify all the default options for it to works:

use(cors({
        credentials: true,
        origin: /localhost.*/,
        allowedHeaders: ['Content-Type', 'Authorization'],
 }))

Any ideas what is causing this?

Sample use case, considering we want to limit origin to a specific client app url. One would use cors plugin like the following:

const app = new Elysia()
  .use(cors({
    origin: 'http://localhost:5173'
  }))
  .get('/', () => {
    return 'Oh hi!'
  })

Expected to have Access-Control-Allow-Origin equal to the app url which is http://localhost:5173. But the cors plugin returns empty string instead:

I'm getting typescript errors when using cors with elysia

Due to a typo the middleware is setting the header value Access-Control-Exposed-Headers, it should be Access-Control-Expose-Headers, instead. Without the d. See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

Additionally the exposedHeader field is checked in order to set the allowed headers: