Cors issue

[fv316]

Hey guys, I am currently trying to get the Kratos registration flow working on a react app that I am creating. I have borrowed some inspiration from the react-native app and the node app that you guys already created. However, I am having CORS issues with the completeSelfServiceRegistrationFlowWithPasswordMethod call when using the @oryd/kratos-client JS package (I have also tried to use fetch directly). I have tried running everything locally (the react app on 127.0.0.1:3000 and kratos on 127.0.0.1:4434) and also on our domain (http://kratos.example.com and http://react.example.com). Get requests are working but the preflight request is failing for post requests:

Access to XMLHttpRequest at 'http://127.0.0.1:3000/error?error=ad779544-b91e-4837-9246-471ae0c43fa7' (redirected from 'http://127.0.0.1:4433/self-service/registration/methods/password?flow=1e82763e-f9e8-45f0-aa33-4db26ac8c6a5') from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My kratos config looks something like this (but I have tried many other options)

cors:
  allowed_origins:
    - http://127.0.0.1:3000 # I have tried with "*"

  enabled: true

The request payload being sent looks like this:

{
    "csrf_token" : "qweqwe...",
    "password": "qweqweqwe",
    "traits.email" : "qwe@qwe.qwe",
    "traits.name.first" : "qwe",
    "traits.name.last": "qwe"
}

[vinckr]

Hey fv316.
I am sure you already saw the setup page for CORS on Kratos.
But have you also checked Common Cookie and CSRF Pitfalls ?

No 'Access-Control-Allow-Origin' header is present on the requested resource.
Did you set allowed headers in the config?

      allowed_headers:
        - Authorization
        - Cookie
      exposed_headers:
        - Content-Type
        - Set-Cookie

[fv316]

Using this config the NODE UI application works but my react application does not. This leads me to believe that it is some client side problem of the request not being sent correctly. Is there an example payload of what should be sent to the complete registration flow endpoint? I could not find one on the REST API docs.

[aeneasr]

Hello, it looks like you are using Kubernetes. Are you sure that the Ingress is not stripping the CORS headers, or rather, that the ingress is incorrectly replying with the wrong CORS headers? Your configuration should work, and if exposed locally (without a proxy in front) should yield the correct CORS headers. This is tested and confirmed working.

You should also check the logs to see if the requests actually make it to ORY Kratos or if they do not (my gut feeling says they do not).

[aeneasr]

Ok, I just checked again. It appears that you are using AJAX to submit the form. This is not supported right now. You need to regularly submit - like an HTML form. AJAX will be better supported starting 0.6

[fv316]

What do you mean by submit the form regularly? I have tried using simple post requests using fetch instead of the client API but I get the same issue

[aeneasr]

Just submit the form. Don't use AJAX. Don't use fetch. Let the user click the submit button and don't do anything - a regular HTML form submission.

[vinckr]

Since the answer was a bit buried in the thread:

You are using AJAX to submit the form. This is not supported right now. You need to regularly submit - like an HTML form. AJAX will be better supported starting 0.6

[vinckr]

If that does not solve your problem, could you open a separate discussion for this please?

[aaadilmaq0]

Ok I solved this issue but now another issue is coming which I will discuss in a separate issue.

[jay-kanakala]

Bro, how did you solve it.. pls tell me.. i am also facing same issue

[vinckr]

@jay-kanakala
What exactly is your issue?

[jay-kanakala]

Well, I am facing few issues mainly not being able to send verification and recovery mails through API flow because it keeps giving CSRF missing bad request error. I guess I have to wait for 0.6 release. For now I have to look for other alternative

[aaadilmaq0]

I weren't able to solve this issue.

…

On Tue, 13 Apr 2021, 12:39 jay-kanakala, ***@***.***> wrote: Bro, how did you solve it.. pls tell me.. i am also facing same issue — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#986 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFMSKR63SGEQ7RHAB5ASMZ3TIPUZPANCNFSM4WCF3RXA> .

[vinckr]

By the way I found a pretty good article on CORS:
https://ieftimov.com/post/deep-dive-cors-history-how-it-works-best-practices/
Maybe it can be of some help.