작성중인 응용 프로그램의 인증 부분을 가져 오려고합니다. 내 JS 프레임 워크로 Laravel 5.3 및 VueJs 2를 사용하고 있습니다. 로그인 구성 요소에이 항목의 내용이 있습니다. CSRF 토큰 불일치 오류, Laravel 5.3/VueJS2
나는 또한 CSRF이
<template>
<form @submit="test" method="POST" action="/test">
<input v-model='input' type='text'>
<button type='submit'>Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
data: {
input: "hello"
}
}
},
mounted() {
console.log('Component ready.')
},
methods: {
test: function() {
this.$http.post('/test', {
headers: {
'X-CSRF-TOKEN': $('meta[name=_token]').attr('content')
}
})
.then(res => {
console.log(res);
})
.catch(err => {
console.error(err);
});
}
}
}
</script>
<meta name="_token" content="{{ csrf_token() }}">
Laravel 5.3의 Illuminate \ Foundation \ Http \ Middleware \ VerifyCsrfToken은 토큰이 일치하지 않는다는 오류를 내뿜습니다. 현재이 클래스 'handle() 함수에 전달 된 모든 $ 요청 정보를 var_dumping하고 있습니다.
public function handle($request, Closure $next)
{
var_dump($request);
if (
$this->isReading($request) ||
$this->runningUnitTests() ||
$this->shouldPassThrough($request) ||
$this->tokensMatch($request)
) {
return $this->addCookieToResponse($request, $next($request));
}
throw new TokenMismatchException;
}
내가 보내는 아약스 요청과 함께 전달되는 CSRF 토큰이 표시되지 않습니다. 이상한 점은 ajax를 사용하지 않고 양식 태그 안에 {{csrf_field()}}과 같은 일반 양식을 제출하면 미들웨어가 성공적으로 토큰을 인증한다는 것입니다. 이것은 나를 사용하는 아약스/vue 리소스에 문제가 있다고 생각하게한다. 내가 잘못한 일을하고 있지만이 문제에 대한 Google 게시물/stackoverflow/youtube 비디오를 훑어 본 적이 있지만 오류가 수정되지 않았습니다. 나는 토큰과 비교할 XSRF-TOKEN 쿠키를 강제로 처리하는 방법을 시도했지만 보안 문제와 사용자가 우연히 또는 모르게 응용 프로그램을 사용하는 동안 쿠키를 삭제할 때 어떤 일이 발생하는지 생각하게합니다. 그것이 오류를 일으키는 지 확신 할 수 없지만 다른 개발자/엔지니어와 이야기를 나누었습니다. 쿠키가 CSRF_TOKEN이 아닌 미들웨어에서 비교되도록하는 것이 좋습니다.
여기 제가 시도한 다른 것들이 있습니다.
//I've tried the vue.http.interceptors method that comes with the bootstrap.js file Laravel generates for vue js 2.
Vue.http.interceptors() //something along those lines
//Setting ajax setup in bootstrap.js as wel
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
//I've also tried sending the token along with the vue-resource post request in the Vue component method as well.
methods: {
test: function() {
this.$http.post('/test', {headers: 'X-CSRF-TOKEN: $('meta[name='_token']'.attr('content')}
).then(response => console.log(response));
}
}
//I've also tried using axios as my http client as well.
이 문제가 발생하는 이유와이 문제를 해결하는 방법에 대한 조언이나 통찰력 ??