SPA calling session/whoami: CORS problem

[zn8nz]

Hi, I'm trying to get a React app working with the browser flows. User registration is successful and returns a ory_kratos_session cookie. Now I want to fetch /self-service/sessions/whoami but run into CORS problems. I pass { mode: "cors", credentials: "include" } but it fails with: "Access to fetch at 'http://127.0.0.1:4433/sessions/whoami' from origin 'http://127.0.0.1:4455' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'." The server is running in dev mode in Docker with unchanged kratos.yml. I tried to add "allowed_origins" to kratos.yml but then I see in the log: ^-- additionalProperties "allowed_origins" not allowed. I tried sessions/whoami with curl, it works fine. I'm only trying to store the Session JSON in my SPA. How to fix this?

[dduzgun-security]

Hi @zn8nz, I had a similar issue.
Can you try this call and see if it works for you?

const [userIdentity, setUserIdentity] = useState();

useEffect(() => {
    fetch("http://127.0.0.1:4433/sessions/whoami", {credentials: "include"})
      .then(response => response.json())
      .then(data => {
        setUserIdentity(data);
      })
}, []);

Also, be sure that the ORY cookies are still stored in the browser when calling the endpoint and that you have configured the allowed_origins field correctly in kratos.yml.

serve:
  public:
      base_url: http://127.0.0.1:4433
      cors:
        enabled: true
        allowed_origins:
          - http://127.0.0.1:3000

[vinckr]

Was just about to write something :)
Also:

Before starting to debug cookie and CSRF issues, make sure to check out the Chrome Developer Tools (or any comparable technology) Cookies tabs in the application tab as well as the network tab - look for Cookie and Set-Cookie HTTP Headers

[zn8nz]

Thanks @dduzgun-security it works now . Problem was the missing allowed_origins in the kratos.yml. When I first tried this I got additionalProperties "allowed_origins" not allowed error in the Kratos log as shown in my original post. I suspect I had put this property with the wrong indentation in the kratos.yml so it may have ended up as part of another property than "cors". I could reproduce the error this way.

The mode: "cors" in the fetch properties can be present or absent: Chrome dev tools shows a request header Sec-Fetch-Mode: cors in either case.