Laravel API Login API doesn't work when put inside a function of Nuxt3-CodePudding

I'm new to Nuxt3 and I've been working on the login api inside a function. The api call works when it's outside the function, but when I put it inside a function, it returns a 419 error response.

this is my form:

<div>
    <div ></div>
    <div >
      <form
        
        method="POST"
        @submit.prevent="onSubmit"
      >
        <div >
          <label  for="email">
            Email
          </label>
          <input
            
            id="email"
            type="text"
            name="email"
            placeholder="Email"
            v-model="form.email"
          />
        </div>
        <div >
          <label
            
            for="password"
          >
            Password
          </label>
          <input
            
            v-model="form.password"
            id="password"
            name="password"
            type="password"
            placeholder="******************"
          />
        </div>
        <div >
          <button
            
            type="submit"
          >
            Sign In
          </button>
          <a
            
            href="#"
          >
            Forgot Password?
          </a>
        </div>
      </form>
      <p >
        &copy;2020 Acme Corp. All rights reserved.
      </p>
    </div>
  </div>

and this is my function:

<script setup>
const url = "http://localhost:8085/api/auth/login";

const form = reactive({
  email: "[email protected]",
  password: "jane123",
});

async function onSubmit() {
  const { data, error } = await $fetch(url, {
    method: "POST",
    headers: {
      "x-api-key": "base64:l/KMGWeUbHwHNrlQXOmpFXTafrccJ8KZvlCaTUEkSOw=",
    },
    body: { form },
  });

  console.log(data, error);
}
</script>

I tried ohmyfetch and lazyfetch but it still returns the same error. but if I use it like this, without the function, it actually works and returns 200 status code. I really don't understand why it wont work inside a function.

  const { data, error } = await useFetch(
"http://localhost:8085/api/auth/login",
{
  method: "POST",
  headers: {
    "x-api-key": "base64:l/KMGWeUbHwHNrlQXOmpFXTafrccJ8KZvlCaTUEkSOw=",
    "Access-Control-Allow-Origin": "*",
  },
  body: {
    email: "[email protected]",
    password: "janedoe123",
  },
}

);

CodePudding user response：

419 error means that your session domain is not correctly set.

Check for the session domain in the Laravel:

SESSION_DOMAIN=localhost

CodePudding user response：

Update: I fixed it by just adding SANCTUM_STATEFUL_DOMAINS=localhost in my env file.

SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost