首页 > 解决方案 > 将 laravel sanctum 与 nuxt js 集成

问题描述

我正在尝试构建一个nuxt (v2.14)应用程序,我在其中使用@nuxtjs/auth-next包进行身份验证。我遵循了文档并成功地与laravel-sanctum. 现在,当 auth package 调用时,我得到了适当的响应/api/user。通过调用其他 api 时axios出现 419 错误

CORS 令牌不匹配

我的代码:

fetchData(){
    var url = 'http://localhost:8000/api/project/search';

    this.$axios.$post(url, this.selectedFields).then(response => {
     if(response.status === 200)
     {

     }
    })
}

我是否需要在 axios 标头中配置 XSRF-TOKEN?,因为它与身份验证中使用的包相同。

控制台截图

网络截图

nuxt.config.js

export default {
  head: {
    title: 'App',
    htmlAttrs: {
      lang: 'en'
    },
    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' }
    ]
  },
  components: true,

  buildModules: [
    '@nuxtjs/tailwindcss',
  ],

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

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

  auth:{
    strategies: {
      'laravelSanctum': {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints: {
          login: {
            url: '/api/login',
            method: 'post'
          },
        }
      },
    },
  },
}

标签: laravelvue.jsnuxt.jslaravel-sanctum

解决方案


推荐阅读