Ajax with Laravel not working

Question

I am using Laravel and I am trying to store information in my database using AJAX but I am getting this error.

dev.js:4 POST http://127.0.0.1:8000/developer/work-links/addLink 419 (unknown status)

I have tried so many times but either I get this 419error or 500 error.

Here are my Routes

Route::group(['middleware'=>'developer', 'web'], function () {

    Route::get('developer', 'DeveloperController@index')->name('developer');

    Route::get('developer/work-progress', 'DeveloperController@progress')->name('progress');

    Route::get('developer/work-links', 'DeveloperController@projectLinks')->name('projectLinks');

    Route::post('developer/work-links/addLink','DeveloperController@addLink');


});

Here is DeveloperController

public function addLink(Request $request) {

            $data = new ProjectLink();

            $data->order_id = $request->order_id;
            $data->link_title = $request->link_title;
            $data->link_description = $request->link_description;
            $data->link = $request->link;

            $data->save();

            return response()->json($data);


    }

Here is the Blade File

@section('content')

    <div class="row">

        <div class="col-sm-6">

            <div class="card-box">

                <div class="form-group">
                    <input class="form-control" type="text" name="link_title" placeholder="title">
                </div>

                <div class="form-group">
                    <input class="form-control" type="text" name="link" placeholder="link">
                </div>

                <div class="form-group">
                    <textarea class="form-control" name="link_description" id="" cols="30" rows="10"></textarea>
                </div>

                <div class="form-group">
                    <input type="hidden" name="order_id" value="{{$order->id}}">
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary" id="addLink">Create Link</button>
                </div>

            </div>

        </div>

        <div class="col-sm-5 offset-1">


            <div class="card-box ribbon-box">
                <div class="ribbon ribbon-primary">Your Work Links</div>
                <div class="clearfix"></div>
                <div class="inbox-widget">
                    {{--<a href="#">--}}

                    @if(count($links) != 0)
                        @foreach($links as $link)
                            <div>
                                <h4 >{{$link->link_title}}</h4>
                                <p id="add_here"></p>
                                <p class="inbox-item-text">{{$link->link_description}}</p>
                                <p class="inbox-item-date">
                                    <a href="{{$link->link}}" target="_blank">
                                        <button type="button" class="btn btn-icon btn-sm waves-effect waves-light btn-success "> Click Me </button>
                                    </a>
                                </p>
                            </div>
                            {{--</a>--}}
                        @endforeach

                    @else
                        <div class="inbox-item">
                            <h1 class="display-4 text-muted" style="padding-top: inherit">No Links For Now</h1>
                        </div>
                    @endif
                </div>
            </div>


        </div>

    </div>

@stop

And I have also Included this meta tag in the head section

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

Here is the AJAX Script

  <script type="text/javascript">
        var token = $('meta[name="csrf-token"]').attr('content');

            $("#addLink").click(function () {

                $.ajax({

                    type: 'POST',
                    url: 'work-links/addLink',
                    dataType: 'json',
                    data: {

                        'link_title': $('input[name=link_title]').val(),
                        'link_description': $('textarea[name=link_description]').val(),
                        'link': $('input[name=link]').val(),
                        'order_id': $('input[name=order_id]').val(),

                    },
                    header: {"X-CSRF-Token": token},

                    success: function(data) {
                        console.log("Success!");
                    }

            });

        });


    </script>

Answer 1

It looks like this might be your csrf header.

Please add this into your head tag, BELOW the CSRF meta tag:

<script type="text/javascript">
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
</script>

You can always check the headers and data that is being sent under the network tab in your chrome dev tools.