Laravel post 方法上的 SPA Vue 不允许。设置 csrf 令牌？

Question

我知道这个问题无处不在。但是他们中的大多数都在使用 blade 而其余的都没有用。我尝试了很多方法来设置这个 csrf-token 但没有用。我正在尝试使用 laravel API 和 laravel 8 中包含的 vuejs 制作 SPA。无论我不断收到“此路线不支持 POST 方法。支持的方法：GET、HEAD。”

这是我在 route.api 文件上的路线是：

Route::post('api/authenticate', [LoginController::class, 'authenticate']);

我包括一个 UsersService.js 文件，我计划在其中定义函数中的所有 api 调用，以便从必要的组件中调用它们。所以我在这里调用了 axios。

import axios from 'axios'
export default {
  authenticate (formData) {
    return axios.post('api/authenticate', { formData })
  }
}

我唯一清楚的是我需要令牌，为了确保它在那里，我在布局 blade 文件上添加了一个脚本，我在其中加载我的组件。所以我可以使用 AppSettings.csrfToken

访问令牌

<script>
  window.AppSettings = {
    csrfToken: "{{ csrf_token() }}"
  }
</script>

这是我的组件

<template>
    <div class="text-center">
        <div class="form-signin" style="width: 100%; max-width: 330px; padding: 15px; margin: 0 auto;">
                <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
                <label for="inputEmail" class="sr-only">Email address</label>
                <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="" v-model="formData.email">
                <label for="inputPassword" class="sr-only">Password</label>
                <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="" v-model="formData.password">
                <div class="checkbox mb-3">
                    <label>
                    <input type="checkbox" value="remember-me"> Remember me
                    </label>
                </div>
                <button class="btn btn-lg btn-primary btn-block" @click="login">Sign in</button>
                <p class="mt-5 mb-3 text-muted">© 2017-2018</p>
        </div>
    </div>
</template>

<script>
    import UsersService from '../../services/UsersService.js'
    export default {
        data(){
          return{
                formData: {
                    email: '',
                    password: '',
                    deviceName: 'browser',
                    _token: AppSettings.csrfToken
                }
            }
        },
        async created () {
        },
       methods:{
           async login(){
                const res = await UsersService.authenticate(this.formData)
                console.log(res)
           },
        }
    }
</script>

cors.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => [
        'api/*',
        'sanctum/csrf-cookie'
    ],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

我有令牌，就在那里，我可以读取它，我应该用它做什么，必须在 axios 上设置哪种方式才能允许此 POST 请求。

根据 laravel 网站中的 sanctum guid，我还添加了 axios.defaults.withCredentials = true；但它什么都不做。也喜欢这个答案CSRF token using SPA

return axios.post('api/authenticate', { formData, _token: AppSettings.csrfToken })

但这也没有用，我确实没有理解某些东西，或者我找错了地方。我运行没主意了，有什么帮助吗？

Answer 1

你可能跑题了 bcs CSRF 是一个常见问题，但是错误没有提到 CSRF，而且这个问题与 CSRF 无关。该错误告诉您路由有问题。

From the docs:

Routes defined in the routes/api.php file are nested within a route group by the RouteServiceProvider. Within this group, the /api URI prefix is automatically applied so you do not need to manually apply it to every route in the file.

您在 routes/api.php 中的路线是：

Route::post('api/authenticate', [LoginController::class, 'authenticate']);

所以因为它自动以 /api 为前缀，所以它实际上定义了路由 /api/api/authenticate。您的 Axios 代码 POST 到 /api/authenticate，但没有关联的路由。

Laravel post 方法上的 SPA Vue 不允许。设置 csrf 令牌？

SPA Vue on Laravel post method not allowed. Setting csrf token?

vue.js

axios

laravel-8