英文:
Nuxt 3 useFetch POST request send a 419 unknown status error
问题
I develop a web app with NuxtJS and Laravel.
当我使用 useFetch 发送 POST 请求时，我收到一个 419 错误，没有更多信息（它是一个未知的状态）。
I launch sanctum/csrf-cookie request, and keep token in variable :
var token;
await useFetch("http://localhost:8000/sanctum/csrf-cookie",
{
method: "GET",
mode: "cors",
credentials: "include"
}
).then(() => {
token = document.cookie
.split("; ")
.find((row) => row.startsWith("XSRF-TOKEN"))
?.split("=")[1];
});
我发起以下请求：
await useFetch(
'http://localhost:8000/login',
{
method: "POST",
headers:{
'Accept': 'application/json',
'X-XSRF-TOKEN': token,
},
body:{
"email": "ukeeling@example.org",
"password": "password",
},
mode: 'cors',
credentials: "include"
}
).then(loginResponse => {
console.log("login", loginResponse.data);
});
This is my route in web.php :
Route::post('login', function(Request $request){
return "Log In";
};
这是我的 cors.php 配置文件：
'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'logout',],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:3000', 'http://localhost:8000', 'http://127.0.0.1:3000', 'http://127.0.0.1:8000'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
GET 请求有效，但 POST 请求无效。如果我将 "/login" 路由添加到 VerifyCsrfToken 的 $except 属性中，登录的 POST 请求有效。而且，所有路由在 Postman 上都有效。
我是否漏掉了什么？
英文:
I develop a web app with NuxtJS and Laravel.
When I send a POST request with useFetch, I have a 419 error, and no more information (it is an unknown status).
I launch sanctum/csrf-cookie request, and keep token in variable :
var token;
await useFetch("http://localhost:8000/sanctum/csrf-cookie",
{
method: "GET",
mode: "cors",
credentials: "include"
}
).then(() => {
token = document.cookie
.split("; ")
.find((row) => row.startsWith("XSRF-TOKEN"))
?.split("=")[1];
});
And I launch
await useFetch(
'http://localhost:8000/login',
{
method:"POST",
headers:{
'Accept': 'application/json',
'X-XSRF-TOKEN': token,
},
body:{
"email": "ukeeling@example.org",
"password": "password",
},
mode: 'cors',
credentials: "include"
}
).then(loginResponse => {
console.log("login", loginResponse.data);
});
This is my route in web.php :
Route::post('login', function(Request $request){
return "Log In";
};
this is my cors.php config file :
'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'logout',],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:3000', 'http://localhost:8000', 'http://127.0.0.1:3000', 'http://127.0.0.1:8000'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
GET request works but not POST.
And, if I add "/login" route in $except attribute in VerifyCsrfToken, the login POST request works.
And, all route work on Postman.
I miss something ?
答案1
得分: 1
我找到答案！
我比较由Laravel发送的CSRF令牌与document.cookie中检索到的令牌。
当我阅读它时，它们看起来很相似，但我将它们放在一个新的文档（在VSCode中）中，逐字逐字地突出显示。
有一个字母无法识别为相同的。
因此，Laravel不会将我的令牌与其令牌匹配，因为它们不同。
要解决这个问题，我执行以下操作：
token = decodeURIComponent(token);
然后它就有效了！
英文:
I find the answer !
I compare CSRF token send by Laravel and the retrieved token with the document.cookie.
They are similar when I read it, but I put their in a new document (in VSCode) and I highlight letter by letter.
There is a letter not recognize as same.
So, Laravel doesn't match my token with his token, because there are different.
To resolve it, I do :
token = decodeURIComponent(token);
And it works !
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论