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

1

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>

answered Mar 24, 2021 at 14:19

N69S

17.3k4 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ser Over a year ago

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

N69S Over a year ago

@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.

N69S Over a year ago

@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

1

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>

edited Apr 22, 2021 at 21:09

DisappointedByUnaccountableMod

6,8444 gold badges21 silver badges23 bronze badges

answered Mar 24, 2021 at 14:27

Basharmal

1,3941 gold badge14 silver badges36 bronze badges

4 Comments

Ser Over a year ago

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

Basharmal Over a year ago

comment this .then(response => response.json()) it will solve the issue and use this .then(response => response .text()) I will update the answer

Ser Over a year ago

yes, this fixed the json bug thank u. But i still have the 500 error

Basharmal Over a year ago

can you post the full error what it is about

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related