Laravel-datatables: 401 Non autorisé

Créé le 3 sept. 2015  ·  15Commentaires  ·  Source: yajra/laravel-datatables

J'ai mis à jour aujourd'hui la version 5.11.7 et j'ai une erreur aléatoire non autorisée de l'ajax lorsque j'entre sur la page où j'ai le composant Datatables.
Mon code est comme ça

    public function anyData()
    {
      $Patient = Patient::select('*')->withTrashed();
      return \Datatables::of($Patient)->make(true);
    }

et la déclaration datatable est

$(document).ready(function() {
    $('#dataTables-patients').DataTable({
      responsive: true,
      processing: true,
      serverSide: true,
      ajax: base_url+'/patient/data',
      language:{
        url:base_url+'/js/dataTables.Spanish.json'
      },
      columns:[
        {data:'dni', name:'dni'},
        {data:'first_name', name:'first_name'},
        {data:'last_name', name:'last_name'},
        {data:'birthday', name:'birthday'},
        {data:'id', name:'id'},
        {data:'active', name:'active'},
      ],
      "columnDefs": [{
        "targets": 4,
        "data": "id",
        "render": function ( data, type, row ) {
          if(row.active=="0"){
            return '<a class="btn btn-primary" href="'+base_url+'/patient/show/'+data+'">'+patient.view+'</a>'+
                   '<a class="btn btn-success respatient" data-id="'+data+'" href="#" >'+patient.restore+'</a>';
          }else{
            return '<a class="btn btn-primary" href="'+base_url+'/patient/show/'+data+'">'+patient.view+'</a>'+
                   '<a class="btn btn-danger delpatient" data-id="'+data+'" href="#" >'+patient.delete+'</a>';
          }
        }

      },
      { "orderable": false, "targets": [ 4 ] },
      { "bSearchable": false, "aTargets": [ 5 ] },
      { "visible": false,  "targets": [ 5 ] }
      ]
    });

});

lorsque Unauthorized explose, je dois me reconnecter à l'application. et ça arrive au hasard : je peux recharger 6 fois la page et il ne se passe rien, et parfois j'entre deux fois et ça se passe sans autorisation.

Commentaire le plus utile

En lisant les commentaires,
J'ai bien résolu le problème.
dans la vue
var token = '{{ csrf_token() }}';

ajax: { url:'$url', type:'post', data: { '_token': token } },

`var table = $('#maTable');

        oTable = table.dataTable({
            processing: true,
            serverSide: true,
            order: [[1, 'desc']],
            buttons: [
                { extend: 'print',  className: 'btn dark btn-outline'       },
                { extend: 'copy',   className: 'btn red btn-outline'        },
                { extend: 'pdf',    className: 'btn green btn-outline'      },
                { extend: 'excel',  className: 'btn yellow btn-outline'     },
                { extend: 'csv',    className: 'btn purple btn-outline'     },
                { extend: 'colvis', className: 'btn dark btn-outline', text: 'Columns'}
            ],
            ajax: {
                url:'$url',
                type:'post',
                data: {
                    '_token': token
                }
            },
            $col,
            \"oLanguage\": {
                \"sEmptyTable\":   \"No se encontraron resultados\",
                \"sInfo\":         \"Mostrando _START_ a _END_ de _TOTAL_ filas\",
                \"sInfoEmpty\":    \"No se encontraron resultados\",
                \"sInfoFiltered\": \"(Filtrado de _MAX_ total de filas)\",
                \"sLengthMenu\":   \"Ver _MENU_ filas\",
                \"sSearch\":       \"Buscar:\",
                \"sZeroRecords\":  \"No se encontraron resultados\"
            },
            \"aoColumnDefs\": [
                { \"bSortable\": false, \"aTargets\": [ 0,-1 ] }

,
{ \"iDataSort\": 1, \"aCibles\": [ 0 ] },

                { \"sWidth\": \"20px\",   \"aTargets\": [ 0,-1 ]  },


            ]
        });


        table.on(\"keyup\", \"input[type=search]\", function () {
            /* Filter on the column (the index) of this element */
            oTable.fnFilter(this.value, $(\"thead input\").index(this));
        });

        $('#sample_1_tools > li > a.tool-action').on('click', function() {
            var action = $(this).attr('data-action');
            //console.log(action);
            oTable.DataTable().button(action).trigger();
        });

`

Tous les 15 commentaires

@ mantrax314 , c'est un bogue fantôme qui est vraiment difficile à déboguer. Plusieurs utilisateurs ont déjà signalé le même problème et ne trouvent rien qui en soit la cause. Je ne peux même pas reproduire la même erreur sur ma machine locale. Ce serait formidable et apprécié si vous pouviez aider et fournir un PR si possible pour résoudre ce problème une fois pour toutes. Merci!

Bonjour,
J'ai rencontré ce problème et essayé de déboguer pendant des heures, mais en vain.
Il semble qu'une solution de contournement consiste à définir votre ajax en tant que requête POST au lieu de GET
Cela a fonctionné pour moi et j'ai testé en actualisant ma page 50 fois sans être expulsé de la page de connexion

La solution de contournement est basée sur ce problème
https://github.com/yajra/laravel-datatables/issues/19

Idem avec @Xyten, j'ai résolu ce problème en utilisant la requête POST, mais j'obtiens une erreur avec le jeton CSRF lors de l'utilisation de POST. Une suggestion à ce sujet ? merci au fait.

@mrofi , suivez les docs pour le problème de jeton. http://laravel.com/docs/5.1/routing#csrf -x-csrf-token

Je viens de lire le problème https://github.com/Chumper/Datatable/issues/170 sur Chumper Datatable et pourrait s'appliquer à nous.

mgsmus a commenté le 16 septembre 2014
J'ai eu ce problème. J'utilisais le serveur Web intégré de PHP via "artisan serve". Je suis passé à Apache et le problème est résolu. Je suppose que la raison en est le multi-threading que le serveur intégré ne prend pas en charge.

Est-ce que l'un d'entre vous utilise "artisan serve" ?

J'utilise "service artisanal". Bien noté. L'utilisation du serveur intégré est assez simple mais il ne peut pas représenter l'environnement réel, j'envisagerai d'utiliser Apache à la place après cela.

Merci, @yajra . btw j'ai résolu le problème du jeton csrf par votre suggestion. J'ai raté cette documentation de Laravel. Où puis-je trouver le moyen de changer le type de requête ajax dans le constructeur html?

@mrofi , merci pour la confirmation. Ce problème est peut-être vraiment dû au "service artisanal".

Pour ajax, vous pouvez lui envoyer un paramètre de tableau comme ci-dessous.

->ajax([
  'url' => 'url',
  'type' => 'post'
])

Plusieurs utilisateurs ont confirmé que le problème était dû au "service artisanal". L'utilisation d'apache/nginx résoudra le problème. Merci!

J'utilise apache sur une machine Fedora, en utilisant localement via le fichier hosts et j'ai exactement le même problème. Des idées?

J'ai résolu ce petit problème comme suit
remplace : ajax : 'ressource',

par:
ajax : {
URL : 'ressource',
en-têtes : {'X-CSRF-TOKEN' : jeton},
Type de données : 'JSON',
avantEnvoi : fonction (xhr) {
xhr.setRequestHeader('Autorisation');
}
},

Quelques conseils
1) Ajax peut appeler en faisant POST ou GET, vous devez donc configurer votre itinéraire dans N'IMPORTE QUEL
```
Route ::any('campos/data','CamposController @data ')->name('campos.data');

2) Dont forget add the token before the ajax calling (in my case is Laravel)

$.ajaxSetup({
en-têtes : {
'X-CSRF-TOKEN' : '{{csrf_token()}}'
}
});

3) I have that issue in using php artisan on Windows. If you use on Linux or Apache you wont have errors. 
4) Error 401 is becouse the session was expired. You need a login again. You could handler the error and take some action

"ajax": "/ressource",
"erreur": fonction (raison) {
console.log("erreur rencontrée ! ");
// traiter la raison ici pour connaître le type de l'erreur
// puis prendre les mesures appropriées
}
```

En lisant les commentaires,
J'ai bien résolu le problème.
dans la vue
var token = '{{ csrf_token() }}';

ajax: { url:'$url', type:'post', data: { '_token': token } },

`var table = $('#maTable');

        oTable = table.dataTable({
            processing: true,
            serverSide: true,
            order: [[1, 'desc']],
            buttons: [
                { extend: 'print',  className: 'btn dark btn-outline'       },
                { extend: 'copy',   className: 'btn red btn-outline'        },
                { extend: 'pdf',    className: 'btn green btn-outline'      },
                { extend: 'excel',  className: 'btn yellow btn-outline'     },
                { extend: 'csv',    className: 'btn purple btn-outline'     },
                { extend: 'colvis', className: 'btn dark btn-outline', text: 'Columns'}
            ],
            ajax: {
                url:'$url',
                type:'post',
                data: {
                    '_token': token
                }
            },
            $col,
            \"oLanguage\": {
                \"sEmptyTable\":   \"No se encontraron resultados\",
                \"sInfo\":         \"Mostrando _START_ a _END_ de _TOTAL_ filas\",
                \"sInfoEmpty\":    \"No se encontraron resultados\",
                \"sInfoFiltered\": \"(Filtrado de _MAX_ total de filas)\",
                \"sLengthMenu\":   \"Ver _MENU_ filas\",
                \"sSearch\":       \"Buscar:\",
                \"sZeroRecords\":  \"No se encontraron resultados\"
            },
            \"aoColumnDefs\": [
                { \"bSortable\": false, \"aTargets\": [ 0,-1 ] }

,
{ \"iDataSort\": 1, \"aCibles\": [ 0 ] },

                { \"sWidth\": \"20px\",   \"aTargets\": [ 0,-1 ]  },


            ]
        });


        table.on(\"keyup\", \"input[type=search]\", function () {
            /* Filter on the column (the index) of this element */
            oTable.fnFilter(this.value, $(\"thead input\").index(this));
        });

        $('#sample_1_tools > li > a.tool-action').on('click', function() {
            var action = $(this).attr('data-action');
            //console.log(action);
            oTable.DataTable().button(action).trigger();
        });

`

@jarm-mcs merci pour la solution, ça marche :)

Salut, j'ai aussi eu ce problème et je l'ai résolu en utilisant les en-têtes axios sur la configuration Ajax. J'utilise Laravel Passport, je ne sais pas si c'est lié, car avec un simple appel axios ça marche

mon bootstrap.js

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

mon script DataTables

$(function() {
            $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    'url':'{!! route('api.games.index') !!}',
                    'headers':window.axios.defaults.headers.common
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'updated_at', name: 'updated_at' }
                ]
            });
        });

En lisant les commentaires,
J'ai bien résolu le problème.
dans la vue
var token = '{{ csrf_token() }}';

ajax: { url:'$url', type:'post', data: { '_token': token } },

`var table = $('#maTable');

        oTable = table.dataTable({
            processing: true,
            serverSide: true,
            order: [[1, 'desc']],
            buttons: [
              { extend: 'print',  className: 'btn dark btn-outline'       },
              { extend: 'copy',   className: 'btn red btn-outline'        },
              { extend: 'pdf',    className: 'btn green btn-outline'      },
              { extend: 'excel',  className: 'btn yellow btn-outline'     },
              { extend: 'csv',    className: 'btn purple btn-outline'     },
              { extend: 'colvis', className: 'btn dark btn-outline', text: 'Columns'}
          ],
            ajax: {
                url:'$url',
                type:'post',
                data: {
                    '_token': token
                }
            },
            $col,
            \"oLanguage\": {
              \"sEmptyTable\":   \"No se encontraron resultados\",
              \"sInfo\":         \"Mostrando _START_ a _END_ de _TOTAL_ filas\",
              \"sInfoEmpty\":    \"No se encontraron resultados\",
              \"sInfoFiltered\": \"(Filtrado de _MAX_ total de filas)\",
              \"sLengthMenu\":   \"Ver _MENU_ filas\",
              \"sSearch\":       \"Buscar:\",
              \"sZeroRecords\":  \"No se encontraron resultados\"
          },
          \"aoColumnDefs\": [
              { \"bSortable\": false, \"aTargets\": [ 0,-1 ] }

,
{ "iDataSort": 1, "aCibles": [ 0 ] },

              { \"sWidth\": \"20px\",   \"aTargets\": [ 0,-1 ]  },


            ]
        });


        table.on(\"keyup\", \"input[type=search]\", function () {
          /* Filter on the column (the index) of this element */
          oTable.fnFilter(this.value, $(\"thead input\").index(this));
      });

        $('#sample_1_tools > li > a.tool-action').on('click', function() {
            var action = $(this).attr('data-action');
            //console.log(action);
            oTable.DataTable().button(action).trigger();
        });

`

merci pour la solution.

Cette page vous a été utile?
0 / 5 - 0 notes