Hi guys, I need to ask for help again in the community, because I did not find a solution in old conversations, GitHub discussions and in the docs. We are facing CORS issues with our single page app. All is living under the same domain hypt.dev (our dev domain). Maybe I missed something so please let me know if I did so or I misunderstood a concept. We use 3 components: - Angular 14 frontend at https://rocket.hypt.dev -> Login page inside the app living at https://rocket.hypt.dev/login - Ory lives at

<https://auth.hypt.dev>

- A backend api available at

<https://api.client-area.hypt.dev>

(but that’s not called in this case) Now what we’ve done: - The angular app does not use the SDK, for now we only use Login, so we simply make the two calls from the SPA on our own as it is described in the docs [1]: - first to

<https://auth.hypt.dev/self-service/login/browser>

- then to

<https://auth.hypt.dev/self-service/login?flow=><flow_id>

- We have configured CORS for our Angular App (on the level of Azure web service) for all domains involved (screenshot 1) - We have also configured CORS in Ory: the UI and the backend API are both set in the CORS Allowed origins. (screenshot 2) However when trying to log the CORS errors as shown in screenshot 3 is shown. This is when the first request is executed to fetch the flow_id. Interestingly there is no

Access-Control-Allow-Origin

returned by this call. When developing locally using

ory proxy

to tunnel the logins, it works. So there does not seem a logic error in the application. Anyone should be able to reproduce the issue, since we pre-filled the credentials since we have no live data on that system. Can somebody help me with this issue? Thanks in advance! [1] https://www.ory.sh/docs/kratos/self-service/flows/user-login#login-for-client-side-ajax-browser-clients

Hi @dazzling-lock-68691 Are you using axios or fetch to make the calls from your Angular app? Are you including

credentials

here? CORS errors exist through the browser only (e.g. make the same call with cURL and you will see CORS is not used). It can exist for a couple of reasons: 1. Ory is not allowing the domain of your SPA 2. Your SPA is not calling Ory correctly fetch with credentials

can you maybe show your CORS settings in the Ory console? I suspect they are somehow not correct

of course 🙂

CORS headers seem to be correct 🤔

curl -sSL -D - <https://auth.hypt.dev/self-service/login/browser>    -X OPTIONS    -H "Access-Control-Request-Method: GET"    -H "Access-Control-Request-Headers: content-type"    -H "Origin: <https://rocket.hypt.dev>"
HTTP/2 204 
date: Thu, 29 Sep 2022 10:19:38 GMT
access-control-allow-credentials: true
access-control-allow-headers: Content-Type
access-control-allow-methods: GET
access-control-allow-origin: <https://rocket.hypt.dev>
access-control-max-age: 5
vary: Origin,Access-Control-Request-Method,Access-Control-Request-Headers
cf-cache-status: DYNAMIC
set-cookie: __cflb=0pg1Sf1ZS9LP1qqZFPyvyxV6cBa8cu5wgRCQ1pWX; SameSite=None; Secure; path=/; expires=Thu, 29-Sep-22 11:19:38 GMT; HttpOnly
server: cloudflare
cf-ray: 7523fb4d88d0b3a4-MUC
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400

ah nice! didn't know it also affected this case. Thanks for verifying and pointing out the probkem @steep-lamp-91158 and @proud-plumber-24205! 🙂 I'll check that out and let you know 🙏

it needs to be set on the front-end call

that's what I meant, we use it in the frontend for the call we make to both ory and backend. sorry for the confusion 🙏 we use the inbuilt

"HttpClient"

and have set

withCredentials: true

https://angular.io/api/common/http/HttpClient

sure np 😉