CODEWITHSUNDEEP
phpjqueryajaxlaravel
Chris
Chris

Reputation: 2181

Laravel 5.5 ajax call 419 (unknown status)

I do an ajax call but I keep getting this error:

419 (unknown status)

No idea what is causing this I saw on other posts it has to do something with csrf token but I have no form so I dont know how to fix this.

my call:

$('.company-selector li > a').click(function(e) {
     e.preventDefault();

     var companyId = $(this).data("company-id");


      $.ajax({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          url: '/fetch-company/' + companyId,
          dataType : 'json',
          type: 'POST',
          data: {},
          contentType: false,
          processData: false,
          success:function(response) {
               console.log(response);
          }
     });
  });

My route:

Route::post('fetch-company/{companyId}', 'HomeController@fetchCompany');

My controller method

/**
 * Fetches a company
 *
 * @param $companyId
 *
 * @return array
 */
public function fetchCompany($companyId)
{
    $company = Company::where('id', $companyId)->first();

    return response()->json($company);
}

The ultimate goal is to display something from the response in a html element.

Upvotes: 193

Views: 334449

Answers (22)

ashik ck
ashik ck

Reputation: 19

If you have large data to post in to the server, please make "_token" variable as the first data.

Like below

var token = $('meta[name="csrf-token"]').attr("content");

$.ajax({
       type:'POST',
       url:'custom_url',

        data: {
        _token: token,
        property: property,
    },

       success:function(response){

          // Log response
          console.log(response);

       }

    });

Upvotes: 0

Emmanuel Iyen
Emmanuel Iyen

Reputation: 439

Just below the form field you can add @csrf like this

@csrf

Upvotes: 0

Dunks1980
Dunks1980

Reputation: 21

I had SESSION_SECURE_COOKIE set to true so my dev environment didn't work when logging in, so I added SESSION_SECURE_COOKIE=false to my dev .env file and all works fine my mistake was changing the session.php file instead of adding the variable to the .env file.

Upvotes: 2

Nole
Nole

Reputation: 847

This worked for me:

$.ajaxSetup({
  headers: {
    'X-CSRF-TOKEN': "{{ csrf_token() }}"
  }
});

After this set regular AJAX call. Example:

    $.ajax({
       type:'POST',
       url:'custom_url',

       data:{name: "some name", password: "pass", email: "[email protected]"},

       success:function(response){

          // Log response
          console.log(response);

       }

    });

Upvotes: 4

Codedreamer
Codedreamer

Reputation: 1702

2019 Laravel Update, Never thought i will post this but for those developers like me using the browser fetch api on Laravel 5.8 and above. You have to pass your token via the headers parameter.

var _token = "{{ csrf_token }}";
fetch("{{url('add/new/comment')}}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': _token,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(name, email, message, article_id)
            }).then(r => {
                return r.json();
            }).then(results => {}).catch(err => console.log(err));

Upvotes: 4

Denz A Gatcho
Denz A Gatcho

Reputation: 1

A simple way to fixe a 419 unknown status on your console is to put this script inside in your FORM. {{ csrf_field() }}

Upvotes: 0

lomelisan
lomelisan

Reputation: 988

This works great for those cases you don't require a form.

use this in header:

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

and this in your JavaScript code:

$.ajaxSetup({
        headers: {
        'X-CSRF-TOKEN': '<?php echo csrf_token() ?>'
        }
    });

Upvotes: 0

Andreas K
Andreas K

Reputation: 1

Got this error even though I had already been sending csrf token. Turned out there was no more space left on server.

Upvotes: 0

Siddhartha
Siddhartha

Reputation: 151

formData = new FormData();
formData.append('_token', "{{csrf_token()}}");
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);

Upvotes: 2

Shamseer Ahammed
Shamseer Ahammed

Reputation: 1947

This error also happens if u forgot to include this, in your ajax submission request ( POST ), contentType: false, processData: false,

Upvotes: 0

Balaji Rajendran
Balaji Rajendran

Reputation: 367

You have to get the csrf token..

$.ajaxSetup({
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
});

After doing same issue is rise ,Just Add this meta tag< meta name="csrf-token" content="{{ csrf_token() }}" >

After this also the error arise ,you can check the Ajax error. Then Also check the Ajax error 

$.ajax({
    url: 'some_unknown_page.html',
    success: function (response) {
        $('#post').html(response.responseText);
    },
    error: function (jqXHR, exception) {
        var msg = '';
        if (jqXHR.status === 0) {
            msg = 'Not connect.\n Verify Network.';
        } else if (jqXHR.status == 404) {
            msg = 'Requested page not found. [404]';
        } else if (jqXHR.status == 500) {
            msg = 'Internal Server Error [500].';
        } else if (exception === 'parsererror') {
            msg = 'Requested JSON parse failed.';
        } else if (exception === 'timeout') {
            msg = 'Time out error.';
        } else if (exception === 'abort') {
            msg = 'Ajax request aborted.';
        } else {
            msg = 'Uncaught Error.\n' + jqXHR.responseText;
        }
        $('#post').html(msg);
    },
});

Upvotes: 2

Muhammad Umair
Muhammad Umair

Reputation: 11

just serialize the form data and get your problem solved.

data: $('#form_id').serialize(),

Upvotes: 1

Wolfernand
Wolfernand

Reputation: 91

If you are loading .js from a file you have to set a variable with the csrf_token in your "main" .blade.php file where you are importing the .js and use the variable in your ajax call.

index.blade.php

...
...
<script src="{{ asset('js/anotherfile.js') }}"></script>
<script type="text/javascript">
        var token = '{{ csrf_token() }}';
</script>

anotherfile.js

$.ajax({
    url: 'yourUrl',
    type: 'POST',
    data: {
        '_token': token
    },
    dataType: "json",
    beforeSend:function(){
        //do stuff
    },
    success: function(data) {
        //do stuff
    },
    error: function(data) {
        //do stuff
    },
    complete: function(){
        //do stuff
    }
});

Upvotes: 9

WHY
WHY

Reputation: 278

some refs =>

...
<head>
    // CSRF for all ajax call
    <meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
 ...
 ...
<script>
    // CSRF for all ajax call
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content') } });
</script>
...

Upvotes: 3

Kannan K
Kannan K

Reputation: 4461

Use this in the head section: 

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

and get the csrf token in ajax:

$.ajaxSetup({
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
});

Please refer Laravel Documentation csrf_token

Upvotes: 391

Jeff Callahan
Jeff Callahan

Reputation: 1351

It's possible your session domain does not match your app URL and/or the host being used to access the application.

1.) Check your .env file:

SESSION_DOMAIN=example.com
APP_URL=example.com

2.) Check config/session.php

Verify values to make sure they are correct.

Upvotes: 16

Y. Joy Ch. Singha
Y. Joy Ch. Singha

Reputation: 3252

use this in your page

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

and in your ajax used it in data:

_token: '{!! csrf_token() !!}',

that is:

$.ajax({
          url: '/fetch-company/' + companyId,
          dataType : 'json',
          type: 'POST',
          data: {
                   _token: '{!! csrf_token() !!}',
                 },
          contentType: false,
          processData: false,
          success:function(response) {
               console.log(response);
          }
     });

Thanks.

Upvotes: 11

2Fwebd
2Fwebd

Reputation: 2095

If you already done the above suggestions and still having the issue.

Make sure that the env variable: 

SESSION_SECURE_COOKIE

Is set to false if you don't have a SSL certificate, like on local.

Upvotes: 8

Syed Waqas Bukhary
Syed Waqas Bukhary

Reputation: 5340

Another way to resolve this is to use the _token field in ajax data and set the value of {{csrf_token()}} in blade. Here is a working code that I just tried at my end.

$.ajax({
    type: "POST",
    url: '/your_url',
    data: { somefield: "Some field value", _token: '{{csrf_token()}}' },
    success: function (data) {
       console.log(data);
    },
    error: function (data, textStatus, errorThrown) {
        console.log(data);

    },
});

Upvotes: 40

Tharanga
Tharanga

Reputation: 2767

Even though you have a csrf_token, if you are authenticate your controller actions using Laravel Policies you can have 419 response as well. In that case you should add necessary policy functions in your Policy class.

Upvotes: 3

The Billionaire Guy
The Billionaire Guy

Reputation: 3552

in my case i forgot to add csrf_token input to the submitted form. so i did this HTML:

<form class="form-material" id="myform">
...
<input type="file" name="l_img" id="l_img">
<input type="hidden" id="_token" value="{{ csrf_token() }}">
..
</form>

JS:

//setting containers
        var _token = $('input#_token').val();
        var l_img = $('input#l_img').val();
        var formData = new FormData();
        formData.append("_token", _token);
        formData.append("l_img", $('#l_img')[0].files[0]);

        if(!l_img) {
            //do error if no image uploaded
            return false;
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "/my_url",
                contentType: false,
                processData: false,
                dataType: "json",
                data : formData,
                beforeSend: function()
                {
                    //do before send
                },
                success: function(data)
                {
                    //do success
                },
                error: function(jqXhr, textStatus, errorThrown) //jqXHR, textStatus, errorThrown
                {
                    if( jqXhr.status === "422" ) {
                        //do error
                    } else {
                        //do error
                    }
                }
            });
        }
        return false; //not to post the form physically

Upvotes: 8

Damien
Damien

Reputation: 1528

This is similar to Kannan's answer. However, this fixes an issue where the token should not be sent to cross-domain sites. This will only set the header if it is a local request.

HTML:

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

JS:

$.ajaxSetup({
    beforeSend: function(xhr, type) {
        if (!type.crossDomain) {
            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
        }
    },
});

Upvotes: 14

Related Questions