Laravel API: "POST http://localhost/api/post 419 (unknown status)" (Vue.js)

Question

Im trying to make a post in a vue component with Laravel Api.

I got CSRF token in my welcome.blade.php:

<meta name="csrf-token" content="{{ csrf_token() }}">

Page does not refresh or add anything when i click on the button. If i click on the button i get this in my console:

POST http://localhost/api/post 419 (unknown status)

PostList.vue

<template> <div class="container py-4"> <form enctype="multipart/form-data" method="post" action="" @submit.prevent="addPost"> <input type="hidden" name="_token" value=""/> <div class="modal-header"> <h4 class="modal-title">Create Post</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div> <div class="modal-body"> <div class="form-group"> <label>Title</label> <input type="text" class="form-control" placeholder="Title" v-model="post.title"> </div> <div class="form-group"> <label>Description</label> <textarea class="form-control" placeholder="Body" v-model="post.body"></textarea> </div> </div> <div class="modal-footer"> <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel"> <input type="submit" class="btn btn-primary" value="Add"> </div> </form> </div> </template> <script> export default { data() { return { post: { id: '', title: '', body: '' } }; }, created() { this.getPosts(); }, methods: { addPost(){ fetch('api/post', { method: 'post', body: JSON.stringify(this.post), headers: { 'content-type': 'apllication/json' } }) .then(response => response.json()) .then(data => { this.getPosts(); }) .catch(err => console.log(err)); } } }; </script>

PostController.php

public function store_vue(Request $request){ $post = new Posts(); $post->title = $request->get('title'); $post->body = $request->get('body'); $post->slug = Str::slug($post->title); $post->author_id = $request->user()->id; if ($post->save()) { return new PostResource($post); } }

I think you do not have any auth in the API route, but you can use laravel sanctum for auth — ORHAN ERDAY
– ORHAN ERDAY, Commented Mar 24, 2021 at 14:07
@Orhan oh ok so it cant read logged in user. I am using auth. can u explain me how i have to put auth in the api routes? — Ser
– Ser, Commented Mar 24, 2021 at 14:14
add this in your headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, — Basharmal
– Basharmal, Commented Mar 24, 2021 at 14:20

N69S · Accepted Answer · 2021-03-24 14:19:11Z

You are getting a 419 error because the request is missing the CSRF token.

You can add it to your form and see if it works for you

<form enctype="multipart/form-data" method="post" action="" @submit.prevent="addPost"> <input type="hidden" name="_token" value="{{ csrf_token() }}" />

OR

Add the header with the CSRF to your call

<script> export default { data() { return { post: { id: '', title: '', body: '' } }; }, created() { this.getPosts(); }, methods: { addPost(){ fetch('api/post', { method: 'post', body: JSON.stringify(this.post), headers: { 'content-type': 'apllication/json', 'X-CSRF-TOKEN': document.querySelector("meta[property='csrf-token']").getAttribute("content"); } }) .then(response => response.json()) .then(data => { this.getPosts(); }) .catch(err => console.log(err)); } } }; </script>

Ok i have done this: 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') But now i got different problem. when i click button i get: POST localhost/api/post 500 (Internal Server Error) SyntaxError: Unexpected token < in JSON at position 0
@ChrisServ that's another issue wich need it's own question with detailed code/debug logs. it mostly happened at json_decode(). try to dump the input before decoding it.
@ChrisServ once you fix the 500 error (check network tab) then your JSON issue will vanish.

DisappointedByUnaccountableMod · Accepted Answer · 2021-04-22 21:09:09Z

Laravel has a middleware called VerifyCsrfToken which is enabled by default. It makes sure all POST requests have a csrf token. This tokens make sure the request is sent from our app only and not from any 3rd party scraper or form submiting tool.

When controller does not get _token in request, it throws error.
Add this 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') on header section in like belwo You can try this

 <script> export default { data() { return { post: { id: '', title: '', body: '' } }; }, created() { this.getPosts(); }, methods: { addPost(){ fetch('api/post', { method: 'post', body: JSON.stringify(this.post), headers: { 'content-type': 'apllication/json', 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }) .then(response => response.text()) .then(data => { this.getPosts(); }) .catch(err => console.log(err)); } } }; </script>

Ok i have done this: 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') But now i got different problem. when i click button i get: POST localhost/api/post 500 (Internal Server Error) SyntaxError: Unexpected token < in JSON at position 0
comment this .then(response => response.json()) it will solve the issue and use this .then(response => response .text()) I will update the answer
yes, this fixed the json bug thank u. But i still have the 500 error

Collectives™ on Stack Overflow

Laravel API: "POST http://localhost/api/post 419 (unknown status)" (Vue.js)

2 Answers 2

3 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Related