在Nuxt，有什么方法可以拦截社交名流的回传来附加XSRF-令牌？

Question

我的API是使用Laravel和Sanctum作为身份验证处理程序编写的。我使用诺克斯奥斯在前端实现登录功能。到目前为止，它起作用了。

问题是，当我尝试使用谷歌实现社交登录时，每当我选择完我的Google帐户，它就会向回调URL发送一个POST请求，但是它不会在标题中添加任何XSRF-TOKEN。这使得错误代码419 - unknown status导致请求失败。

为了说明清楚，请看一下这张截图。是在选择google后使用的。

​

​

我想知道是否有任何方法来拦截这个电话的手动附加，如果有，请告诉我。

如果需要，这是我的脚本

GoogleSignIn.vue

<template>
  <button
    class="block w-full border border-gray-200 bg-white hover:bg-gray-50 transition-colors duration-300 shadow-sm rounded-lg p-3 px-4 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
    @click.prevent="onClick"
  >
    <span class="flex items-center justify-center">
      <!-- logo: google G -->
      <svg
        viewBox="0 0 24 24"
        width="24"
        height="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
          <path
            fill="#4285F4"
            d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
          />
          <path
            fill="#34A853"
            d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
          />
          <path
            fill="#FBBC05"
            d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
          />
          <path
            fill="#EA4335"
            d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
          />
        </g>
      </svg>
      <span class="ml-3 pt-1">
        <slot>Login with Google</slot>
      </span>
    </span>
  </button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$axios
        .get('/auth/sanctum/csrf-cookie')
        .then((_) => this.$auth.loginWith('google'))
    },
  },
}
</script>

nuxt.config.js

axios: {
  proxy: true,
  credentials: true,
  headers: {
    common: {
      Accept: 'application/json, text/plain, */*',
      'X-Requested-With': 'XMLHttpRequest',
    },
  },
},
proxy: {
  '/auth': {
    target: process.env.API_URL,
    pathRewrite: { '^/auth': '/' },
  },
  '/api': {
    target: `${process.env.API_URL}/api`,
    pathRewrite: { '^/api': '/' },
  },
},
auth: {
  strategies: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID,
      codeChallengeMethod: '',
      responseType: 'code',
      endpoints: {
        token: `${process.env.API_URL}/api/auth/google/callback`,
        userInfo: `${process.env.API_URL}/api/user`,
      },
    },
    laravelSanctum: {
      provider: 'laravel/sanctum',
      url: '/auth',
      endpoints: {
        login: { url: '/api/login' },
      },
    },
  },
},
router: {
  middleware: ['auth'],
},

Answer 1

在Laravel中通过禁用VerifyCsrfToken类中的CSRF验证器来解决问题

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array<int, string>
     */
    protected $except = [
        'api/auth/google/callback',
    ];
}