CORS error on registration but not login

[calaracey]

Hi, thanks for this great repository.

I am building a react SPA which uses Ory Kratos for login and registration, using both the password and OIDC (google) methods. On the front end I am using the Ory kratos-client JS SDK.

I have successfully setup the login flow for both OIDC and password methods, but whenever I attempt to submit the registration flow, the Kratos server gives:

Handler: Preflight request
Preflight aborted: method 'OIDC' not allowed

and

Handler: Preflight request
Preflight aborted: method 'PASSWORD' not allowed

On the react SPA it says:
Access to XMLHttpRequest at 'http://127.0.0.1:4433/self-service/registration?flow=885d5ceb-b82d-4fd8-87b2-18dd4cafff3b' 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.

Headers in example registration request:

Accept: application/json, text/plain, */*
Content-Type: application/json
Referer: http://127.0.0.1:3000/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36

My config file:

version:` v0.7.1-alpha.1

dsn: memory

serve:
  public:
    base_url: http://127.0.0.1:4433/
    cors:
      enabled: true
      allowed_origins:
        - http://127.0.0.1:3000
      allowed_methods:
        - OPTIONS
        - POST
        - GET
        - PUT
        - PATCH
        - DELETE
      allowed_headers:
        - Authorization
        - Cookie
        - Content-Type
      exposed_headers:
        - Content-Type
        - Set-Cookie
      debug:
        true
  admin:
    base_url: http://kratos:4434/

selfservice:
  default_browser_return_url: http://127.0.0.1:3000/
  whitelisted_return_urls:
    - http://127.0.0.1:3000

  methods:
    password:
      enabled: true
    oidc:
      enabled: true
...

Ory Kratos is running on docker compose and the service version (despite what the config file says) is v0.8.0-alpha.3

It is mentioned at various places in the docs and in the discussion that AJAX registration is not supported, but it also mentioned that this was to be fixed by version 0.6.

I also took a look at the CORS guide in the docs but it does not seem to have resolved the issue.

Just wondering if anyone could give me a pointer in the right direction.

Thanks

[aeneasr]

You are making a request with the HTTP method "PASSWORD", but that is not correct. It should be a "POST" request. Consider using the official SDKs!

[calaracey]

I have discovered the cause of the problem. I mistakenly believed that the parameters on the submitSelfServiceRegistration method in the Ory/kratos-client JS SDK were the same as the submitSelfServiceLogin method. As you can see, the submitSelfServiceLogin has an optional second parameter (xSessionToken) that registration does not have:

async submitSelfServiceLoginFlow(flow: string, xSessionToken?: string, submitSelfServiceLoginFlowBody?: SubmitSelfServiceLoginFlowBody, options?: any)

async submitSelfServiceRegistrationFlow(flow: string, submitSelfServiceRegistrationFlowBody?: SubmitSelfServiceRegistrationFlowBody, options?: any)

I successfully used this API call to login:
submitSelfServiceLoginFlow(String(flowId), undefined, body)
and tried to use it again for the registration submission:
submitSelfServiceRegistrationFlow(String(flowId), undefined, body)

However, because the registration flow does not have the second argument, the body object which contained the registration body was instead passed as the options parameter. The registration body included a field called "method" to distinguish between 'oidc' and 'password' but because it was passed as an option to Axios, Axios interpreted it as the HTTP method, thus giving the CORS error.

The correct api call in this case is:
submitSelfServiceRegistrationFlow(String(flowId), body)

[vinckr]

Thanks a ton for coming back with your solution, will be helpful to others in the community 🙌