不允许使用 Laravel 发布方法上的 SPA Vue。设置 csrf 令牌？

Question

我知道这个问题无处不在。但是他们中的大多数都在使用刀片，其余的都没有用。我已经尝试了很多方法来设置这个 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 })
  }
}

我唯一清楚的是我需要令牌，为了确保它在那里，我在布局刀片文件中添加了一个脚本，我在其中加载了这样的组件。所以我可以使用 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/api.php 文件中定义的路由由RouteServiceProvider 嵌套在路由组中。在该组中，/api URI 前缀会自动应用，因此您无需手动将其应用到文件中的每个路由。

你在routes/api.php的路线是：

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

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