使用 nuxt/auth + Laravel Sanctum 时 CSRF 令牌不匹配

Question

CSRF 令牌不匹配。当我尝试登录时注册页面出现错误，它运行良好。

我的注册页面

<template>
  <b-container>
    <b-row>
      <b-col cols="6" class="mx-auto">
        <b-card title="Register">
          <b-button variant="primary" @click="register()">Register</b-button>
        </b-card>
      </b-col>
    </b-row>
  </b-container>
 </template>

<script>
  export default {
  auth: 'guest',
  data() {
    return {
        name: "john",
        email: "john@email.com",
        password: "123321"
    };
  },
   methods: {
      async register()  {
        const data = {
            'name': this.name,
            'email': this.email,
            'password': this.password
         }
         console.log(data);
         try {
             const res = await this.$axios.post('/register', data)
             console.log(res)
         }
         catch(e) {
             console.log(e.message)
         }
    }
  }
};
</script>

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'hello',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  router: {
    middleware: ['auth'],
  },

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',

    '@nuxtjs/auth-next',
  ],

   axios: {
    baseURL: "http://localhost:8000/api"
  },

  auth: {
    strategies: {
      'laravelSanctum': {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints: {
          login: {
            url: "/api/login"
          },
          logout: {
            url: "/api/logout"
          },
          user: {
            url: "/api/user"
          }
        },
        user: {
          property: false
        }
      }
    },

    redirect: {
      login: "/login",
      logout: "/",
      home: "/dashboard"
    }

  },

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en'
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    babel: {
      plugins: [
        ['@babel/plugin-proposal-private-methods', { loose: true }]
      ]
    }
  }
}

登录页面

<template>
  <b-container>
    <b-row>
      <b-col cols="6" class="mx-auto">
        <b-card title="Login">
          <b-button variant="primary" @click="login()">Login</b-button>
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  middleware: ["guest"],
  data() {
    return {
      form: {
        email : "john@email.com",
       password : "123321"
      }
    };
  },

  methods: {
    login() {
      this.$auth
        .loginWith("laravelSanctum", {
          data: this.form
        })
        .then(response => console.log(response))
        .catch(error => console.log(error));     
    }
  }
};
</script>

---

编辑：我的网络选项卡 devtools 中确实有以下错误。

<块引用>

网络选项卡错误 xhr.js?b50d:177 POST localhost:8000/api/register 419 (unknown status) "message": "CSRF token mismatch.", "exception": "Symfony\Component\HttpKernel\Exception\ HttpException",