Level 29
You'll have to make sure that the CSRF token is added to your POST request, did you do that?
Feb 5, 2024
7
Level 1
Laravel API post method is not working but get is working in Nuxt
I have a Laravel project using Breeze. I am using cookie. I can login and I can get data from DB but when I want to post it gives me 419 CSRF Token Mismatch error.
This is my Laravel .env configuration:
APP_URL=http://localhost:8000 FRONTEND_URL=http://localhost:3000 SESSION_DOMAIN=localhost SANCTUM_STATEFUL_DOMAINS=localhost:3000
My model:
class Request extends Model { use HasFactory;
protected $fillable = [ 'name', 'email', ]; }
My api.php file:
Route::get('v1/requests', [RequestController::class, 'index'])->middleware(['auth:sanctum']); Route::post('v1/requests', [RequestController::class, 'store'])->middleware(['auth:sanctum']);
and this is my Nuxt post request:
return client('/api/v1/requests', { method: 'POST', body: formData, headers: { 'Accept': 'application/json', } })
The response in browser is:
{ "message": "CSRF token mismatch.", "exception": "Symfony\Component\HttpKernel\Exception\HttpException", "file": "D:\Projects\2024\2- Megafon test\backend-test\laravel\vendor\laravel\framework\src\Illuminate\Foundation\Exceptions\Handler.php", "line": 492, "trace": [ .... }
I want that if get request and login works, then why post give "message": "CSRF token mismatch.", error?
Level 1
@gych Yes I have added.
Below is the request header:
Accept: application/json Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9,fa;q=0.8,da;q=0.7,ru;q=0.6 Connection: keep-alive Content-Length: 139 Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryyz9owBZF8biBp6Sg Cookie: XSRF-TOKEN=eyJpdiI6ImFzT0h3WURsUm9xWk5mVTFJYm10TXc9PSIsInZhbHVlIjoiUnpKUHZnZkkwRk00bDVxcXBKMS90UkNaS1gyNHdMOUgvOWQvbWg1ZzArNjU2ZVUzaXhYK25PTUp4RUVoQmRWV3Z3c3BKVy9EaVBUclBZQ0FQWFowSmZBRHhrOWw2TTg5YWVCdFkxbzhxbkZqTURzSDZHSTBhSlQyYmUwQ09qV1EiLCJtYWMiOiJmNzhiMGFkZDAzNTZiNjNlZmMwNjA5NTY1MTMyMWU4ZDQzNjhhNGM1YTZjNjZlNGI5YjBhOTNiMzY0ZGNiN2Y0IiwidGFnIjoiIn0%3D; laravel_session=eyJpdiI6IjVUVFMyajhzU29MaUNCaHVWNG1jNlE9PSIsInZhbHVlIjoiVUtDOFFjOC8zUWQ0bE9tZ09NUTQvVlZnUnZWR1RodlRET0Y1dXlCY2hHd2oyQldJbS9oSHJWeVVONjhXWGM3bC9DNkd6eDFoRW16RFUrNG5WVHcrL3UvbTd0VktDU1BKM2dkaFpzbTF0TjNRMUdHOEJ1Rm5kNWVHeWNkcDNBUkMiLCJtYWMiOiI0YjllMDg0MzM4OTRiZTBjN2RjOTY5ZGVkOWM5N2NjMmI5NWY0Y2E5MDAzYzRkNzZkNjdkMjUwY2QxYjI2NjI3IiwidGFnIjoiIn0%3D Dnt: 1 Host: localhost:8000 Origin: http://localhost:3000 Referer: http://localhost:3000/ Sec-Ch-Ua: "Not A(Brand";v="99", "Google Chrome";v="121", "Chromium";v="121" Sec-Ch-Ua-Mobile: ?0 Sec-Ch-Ua-Platform: "Windows" Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-site
Level 50
@sham So you're not adding an X-XSRF-TOKEN header. That's why the request fails.
There's an XSRF-TOKEN cookie but it has a different purpose. That cookie is sent from the server so that the token can be picked up and used by front end clients (such as Axios) as the X-XSRF-TOKEN header. Cookies themselves can't be used for protection against XSRF. They wouldn't work at all since cookies are automatically added to every request, even cross-site requests.
Level 1
@JussiMannisto How should I add X-XSRF-TOKEN? This is my request from nuxt:
return client('/api/v1/requests', { method: 'POST', body: formData, headers: { 'Accept': 'application/json', 'Referer': 'http://localhost:3000', } })
Level 29
@sham Use axios for your post request and enable these options for axios, it should add the token
axios.defaults.withCredentials = true;
axios.defaults.withXSRFToken = true;
Is your front end & back end from the same origin?
Level 8
@sham You need to pass csrf token with your api Or if you don't want to pass csrf token then move your api from web.php to api.php file
Level 1
@amitsolanki24_ my api is in api.php right now.
Please or to participate in this conversation.