Laravel 5.5 Ajax Call 419 (état inconnu)

Je fais un appel ajax mais j'obtiens toujours cette erreur:

419 (état inconnu)

Aucune idée de la cause de cela, j'ai vu sur d'autres messages, il doit faire quelque chose avec le jeton csrf mais je n'ai pas de formulaire, donc je ne sais pas comment résoudre ce problème.

mon appel:

$('.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);
          }
     });
  });

Mon itinéraire:

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

Ma méthode de contrôleur

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

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

Le but ultime est d'afficher quelque chose de la réponse dans un élément html.

Utilisez ceci dans la section principale:

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

et obtenez le jeton csrf en ajax:

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

Veuillez consulter la documentation Laravel csrf_token

Une autre façon de résoudre ce problème consiste à utiliser le _tokenchamp dans les données ajax et à définir la valeur de {{csrf_token()}}in blade. Voici un code fonctionnel que je viens d'essayer à ma fin.

$.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);

    },
});

Ceci est similaire à la réponse de Kannan. Cependant, cela résout un problème où le jeton ne doit pas être envoyé à des sites interdomaines. Cela ne définira l'en-tête que s'il s'agit d'une demande locale.

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'));
        }
    },
});

utilisez ceci dans votre page

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

et dans votre ajax utilisé dans les données:

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

C'est:

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

Merci.

Il est possible que votre domaine de session ne corresponde pas à l'URL de votre application et / ou à l'hôte utilisé pour accéder à l'application.

1.) Vérifiez votre fichier .env:

SESSION_DOMAIN=example.com
APP_URL=example.com

2.) Vérifiez config / session.php

Vérifiez les valeurs pour vous assurer qu'elles sont correctes.

Si vous avez déjà fait les suggestions ci-dessus et que vous rencontrez toujours le problème.

Assurez-vous que la variable env:

SESSION_SECURE_COOKIE

Est défini sur false si vous n'avez pas de certificat SSL, comme sur local.

dans mon cas, j'ai oublié d'ajouter l'entrée csrf_token au formulaire soumis. alors j'ai fait ce 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

Même si vous avez un csrf_token, si vous authentifiez les actions de votre contrôleur à l'aide de Laravel, Policiesvous pouvez également avoir une réponse 419. Dans ce cas, vous devez ajouter les fonctions de stratégie nécessaires dans votre Policyclasse.

Si vous chargez .js depuis un fichier, vous devez définir une variable avec le csrf_token dans votre fichier "principal" .blade.php où vous importez le .js et utilisez la variable dans votre appel ajax.

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
    }
});

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

sérialisez simplement les données du formulaire et résolvez votre problème.

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

Vous devez obtenir le jeton csrf.

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

Après avoir fait le même problème, il suffit d'ajouter cette balise meta< meta name="csrf-token" content="{{ csrf_token() }}" >

Après cela, l'erreur se produit également, vous pouvez vérifier l'erreur Ajax. Ensuite, vérifiez également l'erreur Ajax

$.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);
    },
});

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

Mise à jour de Laravel 2019, je n'aurais jamais pensé publier cela, mais pour les développeurs comme moi, utilisant le navigateur, récupérez l'api sur Laravel 5.8 et supérieur. Vous devez transmettre votre jeton via le paramètre headers.

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));

J'avais SESSION_SECURE_COOKIEréglé sur true, donc mon environnement de développement ne fonctionnait pas lors de la connexion, donc j'ai ajouté SESSION_SECURE_COOKIE=false à mon fichier dev .env et tout fonctionne bien.Mon erreur a été de changer le fichier session.php au lieu d'ajouter la variable au fichier .env.

Cette erreur se produit également si vous avez oublié d'inclure ceci, dans votre demande de soumission ajax (POST), contentType: false, processData: false,

Vous avez cette erreur même si j'avais déjà envoyé un jeton csrf. Il s'est avéré qu'il n'y avait plus d'espace libre sur le serveur.

Cela fonctionne très bien pour les cas où vous n'avez pas besoin d'un formulaire.

utilisez ceci dans l'en-tête:

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

et ceci dans votre code JavaScript:

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

Un moyen simple de corriger un statut inconnu 419 sur votre console est de mettre ce script à l'intérieur de votre FORMULAIRE. {{csrf_field ()}}

Cela a fonctionné pour moi:

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

Après ce set appel AJAX régulier. Exemple:

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

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

       success:function(response){

          // Log response
          console.log(response);

       }

    });