New CORS problem

[digitalit]

Hi,
I use SvelteKits as frontend and Elysia/better-auth in backend and all was good until recently when i started getting COORS errors.

I haven't changes anything in my codes and it's all good in local dev env but when deployed on Coolify i get CORS error.

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have followed every thinkable tip but still it wont work. I start to wonder if this is related so some Coolify/Traefik stuff.

Any help would be great as i'm totally stuck now with an angry customer.

[djsisson]

@digitalit so i assume, your frontend running in the users browser is making requests to a different subdomain (your backend) but your backend is not setup to respond to cors requests

if that is the case then you need to add the Cors plugin to Elysia
https://elysiajs.com/plugins/cors.html#cors-plugin

Traefik by default will pass through any cors requests to the service, however you can override that behaviour and set the cors headers in traefik, to do so, you will need to manually add the required labels to the service that is receiving the cors requests, for example

labels:
  - "traefik.http.middlewares.corsheader.headers.accesscontrolallowmethods=GET,OPTIONS,PUT"
  - "traefik.http.middlewares.corsheader.headers.accesscontrolallowheaders=*"
  - "traefik.http.middlewares.corsheader.headers.accesscontrolalloworiginlist=https://foo.bar.org,https://example.org"
  - "traefik.http.middlewares.corsheader.headers.accesscontrolmaxage=100"
  - "traefik.http.middlewares.corsheader.headers.addvaryheader=true"

(coolify should recognise this as an additional middleware and add it to the router)

alternatively you can run your backend under the same domain as your frontend but on a different path, or route all backend requests through your frontend, that removes the need for cors

[digitalit]

thank you @djsisson ,

I use the Cors plugin with Elysia and then use .env to declare valid origins like https://frontent.site.com and that worked fine.

I found that also adding frontent.site.com without https:// like this:

CORS_DOMAINS=frontent.site.com,https://frontent.site.com

works but i dont know why.

Looking at netwworktab in devtools it seems that elysia cors needs frontent.site.com and better-auth needs https://frontent.site.com so i have to ad both.

Weird but i can't get it to work other wise. This looks like a non Coolify issue as i now get the same problem locally if i dont ad:

CORS_DOMAINS="192.168.4.52:5190,http://192.168.4.52:5190"

also in local dev mode.

Maybe this is an issue that comes with using better-auth with elysia?

[djsisson]

@digitalit the scheme/port/host has to also match in the cors request, none http or https hence needing to include the different ones, depending on what the library does in the pre flight request.

[digitalit]

@djsisson yes i looks like preflight want's without https:// and better-auth want's with https://

Do you this that could be the case or am i doing something wrong?

[djsisson]

you don't have any control over what origin the fetch request is being made with

you can use a regexp in your cors plugin if you wanted to only specify one origin

example regexp

^(https?:\/\/)?frontend\.site\.com$

this matches http https or none with that exact domain

but it's not really anything to worry about, if it works then it's fine