我知道这个问题无处不在。但他们中的大多数都在使用刀片，其余的都没有用。我已经尝试了很多方法来设置这个csrf令牌，但都不起作用。我正在尝试用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.srfToken 访问令牌
<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网站中的圣地指南，我还添加了axios.defaults.withCredentials=true；但它什么也没做。也像这个回答CSRF令牌使用SPA
return axios.post('api/authenticate'，｛formData，_token:AppSettings.srfToken｝(
但这也不起作用，当然我不明白什么，或者我看错了地方。我没什么主意了，有什么帮助吗？
您可能已经偏离了bcs CSRF是一个常见的问题，但该错误没有提到CSRF，该问题与CSRF无关。错误告诉您的路由有问题。
来自文档：
routes/api.php文件中定义的路由由RouteServiceProvider嵌套在路由组中。在该组中，/apiURI前缀是自动应用的，因此您不需要手动将其应用于文件中的每个路由。
您在routes/api.php中的路由是：
Route::post('api/authenticate', [LoginController::class, 'authenticate']);
因此，因为它自动以/api为前缀，所以它实际上定义了路由/api/api/authenticate。您的Axios代码POST到/api/authenticate，但没有关联的路由。