Laravel-datatables: 401 não autorizado

Criado em 3 set. 2015  ·  15Comentários  ·  Fonte: yajra/laravel-datatables

Atualizei hoje para a versão 5.11.7 e estou tendo algum erro aleatório não autorizado do ajax quando entro na página onde tenho o componente Datatables.
Meu código é assim

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

e a declaração da tabela de dados é

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

});

quando não autorizado explode, tenho que fazer login novamente no aplicativo. e acontece de forma aleatória: consigo recarregar 6 vezes a página e não acontece nada, e as vezes entro duas vezes e não autorizado acontece.

Comentários muito úteis

Lendo os comentários,
Resolvi bem o problema.
na visão
var token = '{{ csrf_token() }}';

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

`var tabela = $('#minhaTabela');

        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, \"aTargets\": [ 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();
        });

`

Todos 15 comentários

@mantrax314 , este é um bug fantasma que é muito difícil de depurar. Vários usuários já relataram o mesmo problema e não conseguem encontrar nada causando isso. Não consigo nem reproduzir o mesmo erro na minha máquina local. Seria ótimo e apreciado se você pudesse ajudar e fornecer um PR, se possível, para corrigir esse problema de uma vez por todas. Obrigado!

Olá,
Eu encontrei esse problema e tentei depurar por horas, mas sem sucesso.
Parece que uma solução alternativa é definir seu ajax como uma solicitação POST em vez de GET
Isso funcionou para mim e eu testei atualizando minha página 50 vezes sem ser expulso para a página de login

A solução alternativa é baseada neste problema
https://github.com/yajra/laravel-datatables/issues/19

O mesmo com @Xyten resolvi isso usando a solicitação POST, mas recebo erro com o token CSRF ao usar POST .. alguma sugestão para isso? obrigado bjs.

@mrofi , siga os documentos para emissão de token. http://laravel.com/docs/5.1/routing#csrf -x-csrf-token

Acabei de ler o problema https://github.com/Chumper/Datatable/issues/170 no Chumper Datatable e pode ser aplicável a nós.

mgsmus comentou em 16 de setembro de 2014
Eu tive esse problema. Eu estava usando o servidor web embutido do PHP via "servidor artesanal". Mudei para o Apache e o problema foi resolvido. Eu acho que o motivo é multi-threading que o servidor interno não suporta.

Algum de vocês usando "artesão serve"?

Estou usando "servido artesanal". Bem observado. Usar o servidor embutido é bastante fácil, mas não pode representar o ambiente real, considerarei usar o Apache depois disso.

Obrigado, @yajra . btw resolvi o problema do token csrf por sua sugestão. Eu perdi essa documentação do Laravel. Onde posso encontrar a maneira de alterar o tipo de solicitação ajax no construtor html?

@mrofi , obrigado por confirmar. Este problema pode realmente ser devido ao "serviço artesanal".

Para ajax, você pode enviar um parâmetro de array para ele como abaixo.

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

Vários usuários confirmaram que o problema era devido ao "serviço artesanal". Usar o apache/nginx corrigirá o problema. Obrigado!

Estou usando o apache em uma máquina Fedora, usando localmente através do arquivo hosts e estou tendo exatamente o mesmo problema. Alguma ideia?

Eu resolvi esse pequeno problema da seguinte forma
substitui: ajax: 'recurso',

por:
ajax: {
url: 'recurso',
cabeçalhos: {'X-CSRF-TOKEN': token},
tipo de dados: 'JSON',
antesEnviar: função (xhr) {
xhr.setRequestHeader('Autorização');
}
},

Algumas dicas
1) Ajax talvez chame fazendo POST ou GET então você precisa configurar sua rota em QUALQUER
```
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({
cabeçalhos: {
'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": "/recurso",
"erro": função(razão) {
console.log("erro encontrado! ");
// processa o motivo aqui para saber o tipo do erro
// e, em seguida, tome as medidas apropriadas
}
```

Lendo os comentários,
Resolvi bem o problema.
na visão
var token = '{{ csrf_token() }}';

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

`var tabela = $('#minhaTabela');

        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, \"aTargets\": [ 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 obrigado pela solução, funcionou :)

Oi, eu também tive esse problema e resolvi usando cabeçalhos axios na configuração do Ajax. Estou usando o Laravel Passport, não sei se está relacionado, pois com uma simples chamada de axios funciona

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

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

Lendo os comentários,
Resolvi bem o problema.
na visão
var token = '{{ csrf_token() }}';

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

`var tabela = $('#minhaTabela');

        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, "aTargets": [ 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();
        });

`

thx pela solução.

Esta página foi útil?
0 / 5 - 0 avaliações