Laravel
AJAX의 토큰 불일치 오류

AngularJS HTML JavaScript jQuery MySQL Node.js PHP SQL symfony2 Vue.js
수색…


소개

TokenMismatch Error를받는 비율이 매우 높다는 것을 분석했습니다. 그리고이 오류는 바보 같은 실수로 인해 발생합니다. 개발자가 실수를하는 데는 여러 가지 이유가 있습니다. 다음은 헤더에 No _token, Ajax 사용시 _token 전달 된 데이터 없음, 저장 경로에 대한 사용 권한 문제, 유효하지 않은 세션 저장 경로 등의 몇 가지 예입니다.

헤더에 설치 토큰

default.blade.php 의 <head> 에 토큰을 설정하십시오. 

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

스크립트 상단에 ajaxSetup 을 추가하면 모든 곳에서 액세스 할 수 있습니다. 이렇게하면 각 ajax 호출에 헤더가 설정됩니다. 

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

토큰 설정
꼬리표

<form> 태그에 아래 함수를 추가하십시오. 이 함수는 _token 이라는 숨겨진 필드를 생성하고 토큰에 값을 _token . 

{{csrf_field()}}

value 속성에서 숨겨진 _token 에 csrf_token () 함수를 추가하십시오. 이렇게하면 암호화 된 문자열 만 생성됩니다.

<input type="hidden" name="_token" value="{{csrf_token()}}"/>

세션 저장소 경로 및 권한 확인

여기에 내가 그 프로젝트의 응용 프로그램 URL은 APP_URL=http://project.dev/ts/toys-store 라고 가정합니다 APP_URL=http://project.dev/ts/toys-store

  1. folder의 storage_path('framework/sessions') 쓰기 권한을 설정합니다.
  2. laravel 프로젝트의 루트 인 'path' => '/ts/toys-store', 를 확인하십시오.
  3. 쿠키의 이름을 'cookie' => 'toys-store', 
return [
    'driver' => env('SESSION_DRIVER', 'file'),
    'lifetime' => 120,
    'expire_on_close' => false,
    'encrypt' => false,
    'files' => storage_path('framework/sessions'),
    'connection' => null,
    'table' => 'sessions',
    'lottery' => [2, 100],
    'cookie' => 'toys-store',
    'path' => '/ts/toys-store',
    'domain' => null,
    'secure' => false,
    'http_only' => true,
];

Ajax에서 _token 필드 사용

AJAX 호출에 _token 을 보내는 많은 방법이 있습니다.

  1. var formData = new FormData($("#cart-add")[0]); 사용하여 <form> 태그 내의 모든 입력 필드 값을 var formData = new FormData($("#cart-add")[0]);
  2. $("form").serialize(); 사용하십시오 $("form").serialize(); 또는 $("form").serializeArray();
  3. Ajax data 에 _token 수동으로 추가하십시오. $('meta[name="csrf-token"]').attr('content') 또는 $('input[name="_token"]').val() $('meta[name="csrf-token"]').attr('content') 사용하여 $('meta[name="csrf-token"]').attr('content')
  4. 우리는 아래의 코드처럼 특정 Ajax 호출에서 헤더로 설정할 수있다. 
$.ajax({
    url: $("#category-add").attr("action"),
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    dataType: "json",
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow