Ajax POST 요청에 대한 Laravel csrf 토큰 불일치
Ajax를 통해 데이터베이스에서 데이터를 삭제하려고 합니다.
HTML:
@foreach($a as $lis)
//some code
<a href="#" class="delteadd" id="{{$lis['id']}}">Delete</a>
//click action perform on this link
@endforeach
내 Ajax 코드:
$('body').on('click', '.delteadd', function (e) {
e.preventDefault();
//alert('am i here');
if (confirm('Are you sure you want to Delete Ad ?')) {
var id = $(this).attr('id');
$.ajax({
method: "POST",
url: "{{url()}}/delteadd",
}).done(function( msg ) {
if(msg.error == 0){
//$('.sucess-status-update').html(msg.message);
alert(msg.message);
}else{
alert(msg.message);
//$('.error-favourite-message').html(msg.message);
}
});
} else {
return false;
}
});
데이터베이스에서 데이터를 가져오기 위한 쿼리입니다.
$a = Test::with('hitsCount')->where('userid', $id)->get()->toArray();
단, [Delete link data not deleted]를 클릭하여 csrf_token mismatch를 표시하면...
이 문제의 「X-CSRF-TOKEN」을 해결하는 최선의 방법은, 다음의 코드를 메인 레이아웃에 추가하고, 통상의 Ajax 콜을 계속 발신하는 것입니다.
인헤더
<meta name="csrf-token" content="{{ csrf_token() }}" />
스크립트 내
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
</script>
Ajax 요청에 데이터를 추가해야 합니다.그게 일이 되었으면 좋겠어요.
data: {
"_token": "{{ csrf_token() }}",
"id": id
}
덧붙였습니다.headers:Ajax »:
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
표시:
<div id = 'msg'>
This message will be replaced using Ajax. Click the button to replace the message.
</div>
{!! Form::submit('Change', array('id' => 'ajax')) !!}
Ajax 함수:
<script>
$(document).ready(function() {
$(document).on('click', '#ajax', function () {
$.ajax({
type:'POST',
url:'/ajax',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
success:function(data){
$("#msg").html(data.msg);
}
});
});
});
</script>
컨트롤러 내:
public function call(){
$msg = "This is a simple message.";
return response()->json(array('msg'=> $msg), 200);
}
루트에 있습니다.php
Route::post('ajax', 'AjaxController@call');
라라벨 8^
Route::post('ajax', [AjaxController::class, 'call']);
토큰을 양식에 넣고 이 토큰을 아이디로 받는 것이 좋을 것 같습니다.
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
JQuery는 다음과 같습니다.
var data = {
"_token": $('#token').val()
};
이렇게 하면 JS가 블레이드 파일에 있을 필요가 없습니다.
파일을 하고 있는 는, 「 」 「 」 「 」를 넣을 수 .meta에 꼬리표를 달다section 어떤을 붙이든지)이 .meta
@section('head')
<meta name="csrf_token" content="{{ csrf_token() }}" />
@endsection
', '보다', '보다', '보다', '보다', '다', '다', '다',headers에 ajax에서는 ( )를 사용하고 .datatable다음 중 하나:
"headers": {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')}
전문이 .datatableAjax :예 :
$('#datatable_users').DataTable({
"responsive": true,
"serverSide": true,
"processing": true,
"paging": true,
"searching": { "regex": true },
"lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
"pageLength": 10,
"ajax": {
"type": "POST",
"headers": {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
"url": "/getUsers",
"dataType": "json",
"contentType": 'application/json; charset=utf-8',
"data": function (data) {
console.log(data);
},
"complete": function(response) {
console.log(response);
}
}
});
, .........200 status★★★★★★★★★★★★★★★★★★에ajax탁한한다
idmeta을
<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
그리고 자바스크립트에서 얻을 수 있습니다.
$.ajax({
url : "your_url",
method:"post",
data : {
"_token": $('#csrf-token')[0].content //pass the CSRF_TOKEN()
},
...
});
를 하지 않고 할 수 .metalinedisplaces를 합니다.
data : {
_token: "{{ csrf_token() }}"
}
또는
data : {
_token: @json(csrf_token()),
}
@martin-hartmann 덕분에
편의를 위해 X-XSRF-TOKEN cookie 가 설정되어 있는 것에 주의해 주세요.Angular 등의 프레임워크에서 기본값으로 설정됩니다.https://laravel.com/docs/5.7/csrf#csrf-x-xsrf-token 에서 이것을 확인해 주세요.사용하고 싶은 경우도 있습니다.
가장 좋은 방법은 쿠키를 비활성화할 경우 메타를 사용하는 것입니다.
var xsrfToken = decodeURIComponent(readCookie('XSRF-TOKEN'));
if (xsrfToken) {
$.ajaxSetup({
headers: {
'X-XSRF-TOKEN': xsrfToken
}
});
} else console.error('....');
여기서 권장되는 메타 방식(필드는 임의의 방법으로 배치할 수 있지만 메타는 매우 적합합니다)
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
「 」의 .decodeURIComponent()쿠키 저장에 사용되는 uri 형식에서 디코딩됩니다.[라벨라벨라벨라벨라벨라벨라벨라벨라벨라!
다음 항에서는 체크할 문서의 csrf cookie에 대해 설명합니다.https://laravel.com/docs/5.7/csrf#csrf-x-csrf-token
또, larabel(bootstrap.js)이 디폴트로 악시에 대해서 어떻게 설정되어 있는지를 나타냅니다.
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');
}
하세요.resources/js/bootstrap.js.
쿠키 기능을 읽어보십시오.
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
마스터 파일에 이 행을 포함해야 합니다.
<meta name="csrf-token" content="{{ csrf_token() }}" />
ajax를 호출하는 동안 csrf 토큰을 구현해야 합니다.
$.ajax({
url:url,
data:{
_token:"{{ csrf_token() }}"
},
success:function(result){
//success message after the controller is done..
}
})
jQuery를 사용하여 AJAX Post를 전송하는 경우 다음 코드를 모든 보기에 추가합니다.
$( document ).on( 'ajaxSend', addLaravelCSRF );
function addLaravelCSRF( event, jqxhr, settings ) {
jqxhr.setRequestHeader( 'X-XSRF-TOKEN', getCookie( 'XSRF-TOKEN' ) );
}
function getCookie(name) {
function escape(s) { return s.replace(/([.*+?\^${}()|\[\]\/\\])/g, '\\$1'); };
var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)'));
return match ? match[1] : null;
}
Larabel은 모든 요청에 XSRF 쿠키를 추가하고 제출 직전에 모든 AJAX 요청에 자동으로 추가합니다.
getCookie 함수는 다른 함수 또는 jQuery 플러그인이 있으면 대체할 수 있습니다.
@Deepak saini에 의해 받아들여진 답변에 문제가 생긴 사람은 제거하려고 합니다.
cache:false,
processData:false,
contentType:false,
에 액세스 합니다.
사용하다
dataType:"json",
세션이 만료된 경우 이를 사용하여 다시 로그인할 수 있습니다.
$(document).ajaxComplete(function(e, xhr, opt){
if(xhr.status===419){
if(xhr.responseJSON && xhr.responseJSON.message=='CSRF token mismatch.') window.location.reload();
}
});
Larabel 7.0 프로젝트에서 이 오류를 겪고 있는 경우
컨트롤러에 송신하는 파라미터의 일부로서 토큰을 추가하면, 상기의 회답과 같이 문제가 해결됩니다.이는 Larabel이 교차 사이트 공격으로부터 사이트를 보호한 결과입니다.폼을 송신할 때마다 하나의 토큰을 생성해야 합니다.
"_token": "{{ csrf_token() }}"
이제 사용할 수중에 넣을 수 있습니다.
const postFormData = {
'name' : $('input[name=name]').val(),
"_token": "{{ csrf_token() }}"
};
$.ajax({
url: 'pooling'
, type: 'post'
, data: postFormData
, dataType: 'json'
, success: function(response) { consolel.log(response) }
});
CSRF 보호 미들웨어가 요청을 검증할 수 있도록 숨겨진 CSRF(사이트 간 요구 위조) 토큰 필드를 양식에 포함해야 합니다.
Larabel은 응용 프로그램에 의해 관리되는 활성 사용자 세션별로 CSRF "토큰"을 자동으로 생성합니다.이 토큰은 인증된 사용자가 응용 프로그램에 실제로 요청을 수행하는 사용자인지 확인하기 위해 사용됩니다.
따라서 Ajax 요청을 수행할 때는 데이터 매개 변수를 통해 csrf 토큰을 전달해야 합니다.
여기 샘플 코드가 있습니다.
var request = $.ajax({
url : "http://localhost/some/action",
method:"post",
data : {"_token":"{{ csrf_token() }}"} //pass the CSRF_TOKEN()
});
xxxxxxx 오래된 답변이 삭제되었습니다.
설명/갱신
메타 헤더의 csrf 토큰은 세션 관리에 사용됩니다.
Larabel은 응용 프로그램에 의해 관리되는 활성 사용자 세션별로 CSRF "토큰"을 자동으로 생성합니다.
이 값은 다음 항목에 포함된 값과 동일합니다.
@csrf내 내의 에 의해,_token」를 참조해 주세요.csrf_token()컨트롤러 또는 블레이드템플릿의 임의의 장소에서 사용되는 글로벌 도우미 기능.
중요한
- 아직 인증되지 않은 세션의 경우 CSRF 토큰은 서비스된 페이지마다 재생성되거나 다릅니다.즉, 로드된 페이지마다 새로운 세션 데이터가 생성됩니다.
- 인증된 세션의 경우 CSRF 토큰은 모든 페이지에서 동일합니다.즉, 세션 데이터는 로드된 모든 페이지에서 유지됩니다.
결론
다음 방법으로 CSRF 토큰을 Ajax 요구에 포함합니다.
- 메타 헤더 또는 생성된 숨김으로부터
_token입력 필드 - 다음 형식으로 Ajax POST 요청을 전송할 때 유용합니다.
<script>
$(document).ready(function() {
let token = $('meta[name="csrf_token"]').attr('content');
// let token = $('form').find('input[name="_token"]').val(); // this will also work
let myData = $('form').find('input[name="my_data"]').val();
$('form').submit(function() {
$.ajax({
type:'POST',
url:'/ajax',
data: {_token: token, my_data: myData}
// other ajax settings
});
return false;
});
});
</script>
- 불러
csrf_token()blade 템플릿의 숨겨진 요소에서 js로 토큰을 가져옵니다.폼 없이 Ajax POST 요청을 전송할 때 유용합니다.
블레이드:
<span id='csrf' style='display:none'>{{ csrf_token() }}<span>
JavaScript:
<script>
$(document).ready(function() {
let token = $('#csrf').html();
$.ajax({
type:'POST',
url:'/ajax',
data: {_token: token, my_data: 'john'}
// other ajax settings
});
});
</script>
폼 내에서 @csrf를 사용하면 정상적으로 동작합니다.
저는 요즘 이 에러가 자주 발생합니다.값을 참조할 때는 반드시 보다 구체적인 셀렉터를 사용하십시오.예를 들면$('#firstname')사용하다$('form').find('#firstname');
라라벨 5.8
ajax url(sys js 파일)에서 csrf를 사용합니다.
$.ajax({
url: "/addCart" + "?_token=" + productCSRF,
type: "POST",
..
})
새로운 라벨에 있는 사람들은 이것을 JS나 블레이드 파일 어디에서나 하면 CSRF 토큰을 얻을 수 있습니다.
var csrf = document.querySelector('meta[name="csrf-token"]').content;
바닐라 JS입니다.아약스는 이렇게 해야 돼
var csrf = document.querySelector('meta[name="csrf-token"]').content;
$.ajax({
url: 'my-own-url',
type: "POST",
data: { 'value': value, '_token': csrf },
success: function (response) {
console.log(response);
}
});
csrfmiddlewaretoken: '{ csrf_token }}'을 데이터 내에 넣는 것만으로 문제없이 동작합니다!!
$.ajax({
url : "url where you want to send data"
type : "POST", // http method
data : {
name:"...",
csrfmiddlewaretoken: '{{ csrf_token }}' , #this works for me
},
// handle a successful response
success : function(data){
alert('......');
},
error : function() {
..............
}
});
$middleware Groups를 정의하는 경우도 있습니다.
다음 형식을 사용해야 합니다.
protected $middlewareGroups = [
'web' => [],
'api' => [
'web',
'throttle:500,1'
],
'basic' => [
'auth:basic',
]
];
Larabel을 5에서8로 업그레이드 할 때 이 오류가 발생할 경우 다음 명령을 에 추가합니다.app/Http/Middleware/VerifyCsrfToken.php:
public static function serialized()
{
return true;
}
블레이드 파일의 스크립트 태그에서 다음과 같이 수행하여 유효한 폼 토큰을 생성하고 jQuery로 가져옵니다.
<script>
$(document).ready(function() {
$("#my-upload-button").click(function() {
var token = "{{ csrf_token() }}";//here getting token from blade
$.post('my-url', {
_token: token,
datra: ...
},
function(data) {
alert(data);
});
});
});
이 문제는 제거만으로 해결되었습니다.processData: false
$.ajax({
url: '{{ route('login') }}' ,
method: 'POST',
data: {
_token : {{ csrf_token() }},
data : other_data,
},
cache: false,
//processData: false, // remove this
...
success: function(res){
...
}
});
메인 페이지(someViewsName.blade.php)에서 글로벌 변수를 선언합니다.
<script>
var token = "{{ csrf_token() }}";
</script>
<script src="/path/to/your_file.js"></script>
그런 다음 your_file.js로
$.ajax({
type: "post",
url: "http://your.url/end/point",
data: {
_token:token,
data:your_data,
},
dataType: "json",
success: function (response) {
// code some stuff
}
});
실제로 이 오류가 발생하여 해결책을 찾을 수 없었습니다.나는 사실 에이잭스 요청을 하지 않게 되었다.이 문제가 서버상의 서브도메인이기 때문인지 아닌지 모르겠습니다.여기 제 질문이 있습니다.
$('#deleteMeal').click(function(event) {
var theId = $(event.currentTarget).attr("data-mealId");
$(function() {
$( "#filler" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Are you sure you want to delete this Meal? Doing so will also delete this meal from other users Saved Meals.": function() {
$('#deleteMealLink').click();
// jQuery.ajax({
// url : 'http://www.mealog.com/mealtrist/meals/delete/' + theId,
// type : 'POST',
// success : function( response ) {
// $("#container").replaceWith("<h1 style='color:red'>Your Meal Has Been Deleted</h1>");
// }
// });
// similar behavior as clicking on a link
window.location.href = 'http://www.mealog.com/mealtrist/meals/delete/' + theId;
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
});
그래서 실제로 Post Request를 실행하는 대신 API로 이동하는 앵커를 셋업했습니다.이것은 대부분의 어플리케이션에서 하고 있는 일입니다.
<p><a href="http://<?php echo $domain; ?>/mealtrist/meals/delete/{{ $meal->id }}" id="deleteMealLink" data-mealId="{{$meal->id}}" ></a></p>
언급URL : https://stackoverflow.com/questions/32738763/laravel-csrf-token-mismatch-for-ajax-post-request
'programing' 카테고리의 다른 글
| 노드 하나가 사망한 후 3노드 Galera 클러스터의 정의된 동작은 무엇입니까? (0) | 2022.09.11 |
|---|---|
| Android-java - 객체 내의 특정 값을 기준으로 객체 목록을 정렬하는 방법 (0) | 2022.09.11 |
| base-2 이진수 문자열을 int로 변환합니다. (0) | 2022.09.11 |
| MySQL에 삽입할 때 PHP에서 단일 따옴표 이스케이프 (0) | 2022.09.11 |
| Mariadb 업데이트 문을 실행하는 동안 오류가 발생했습니다. (0) | 2022.09.11 |