~Hi everyone I am new to Kratos and trying to create a basic auth system using Kratos and nextjs, I have created a basic auth system using username and password only, but I am getting method not allowed error while I am trying POST request for registration endpoint here is my kratos config~

version: v0.13.0
dsn: "overrided-by-env"
serve:
  public:
    base_url: <http://127.0.0.1:4433/>
    cors:
      enabled: true
      allow_credentials: true
      allowed_methods:
        - POST
        - GET
        - PUT
        - PATCH
        - DELETE
        - OPTIONS
      allowed_headers:
        - Authorization
        - Cookie
        - Content-Type
        - X-Session-Token
      exposed_headers:
        - Content-Type
        - Set-Cookie
      debug: true
  admin:
    base_url: <http://0.0.0.0:4434/>
selfservice:
  default_browser_return_url: <http://localhost:3000/>
  methods:
    password:
      enabled: true
  flows:
    login:
      ui_url: <http://localhost:3000/auth/login>
    registration:
      ui_url: <http://localhost:3000/auth/registration>
    settings:
      ui_url: <http://localhost:3000/auth/settings>
    recovery:
      enabled: false
log:
  level: debug
secrets:
  cookie:
    - PLEASE-CHANGE-ME-I-AM-VERY-INSECURE
identity:
  default_schema_id: default
  schemas:
    - id: default
      url: file:///etc/config/kratos/identity.schema.json
courier:
  smtp:
    connection_uri: <smtps://test:test@mailslurper:1025/?skip_ssl_verify=true>

this is my identity JSON

{
  "$id": "<https://schemas.ory.sh/presets/kratos/quickstart/username-password/identity.schema.json>",
  "$schema": "<http://json-schema.org/draft-07/schema#>",
  "title": "UsernamePassword",
  "type": "object",
  "properties": {
    "traits": {
      "type": "object",
      "properties": {
        "username": {
          "type": "string",
          "format": "string",
          "title": "username",
          "minLength": 8,
          "maxLength": 30,
          "<http://ory.sh/kratos|ory.sh/kratos>": {
            "credentials": {
              "password": {
                "identifier": true
              }
            }
          }
        }
      },
      "required": [
        "username"
      ],
      "additionalProperties": false
    }
  }
}

and this is how I am calling the API

const getRegistrationFlowId = async () => {
  const response = await fetch(
    "<http://127.0.0.1:4433/self-service/registration/api>"
  );
  const data = await response.json();
  return data.id;
};

const handleSubmit = async (event) => {
  event.preventDefault();

  const flowId = await getRegistrationFlowId();

  const response = await fetch(
    `<http://127.0.0.1:4433/self-service/registration/api?flow=${flowId}>`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        method: "password",
        traits: {
          username,
        },
        password,
      }),
    }
  );
    console.log(response);
  // handle response
};