반응형
Laravel Axios Vue를 사용하여 상태 코드 419로 실패
개념:사용자가 질문을 게시할 수 있는 응용 프로그램이 있는데...사용자가 질문 버튼을 클릭하면 Vue.js와 Axios를 사용하여 질문서를 제출하려고 한다.
문제: 질문이 제대로 제출되는 시간의 70%가 제대로 제출되지 않았지만, 실패하는 시간의 30%가 "자원을 로드하지 못함: 서버가 419(알 수 없는 상태) 상태로 응답함"을 반환함
내 Vue 구성 요소
<template>
<div id = "main_question_box" class = "tab-pane fade">
<div class="panel-body posting-field-box">
<textarea name="feed_body" class="summernote posting-field form-control"></textarea>
<button class = "example-btn btn btn-xs btn-default pull-right">View Question Examples</button>
</div>
<div class="panel-footer">
<ul class="list-inline pull-right">
<li>
<button @click = "sendPost" class="feed-post-btn btn btn-submit btn-sm btn-success pl-l pr-l">
<span>Ask</span>
<i class="fa fa-paper-plane pl-sm"></i>
</button>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</template>
<script>
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
export default {
props:['timelineId'],
data(){
return {
feed_body: '',
timeline_id: this.timelineId,
type: 'Question',
post_ready: false
}
},
methods: {
sendPost: function () {
this.compilePost(this);
if(this.post_ready){
var self = this;
self.startLoader();
axios.post('/timeline',
{
feed_body: this.feed_body,
timeline_id: this.timeline_id,
feed_type: this.type
}).then(response =>{
this.feed_body = '';
this.post_ready = false;
$('#main_question_box .summernote').summernote('code', '');
this.$emit('newFeedSent', response.data);
});
}
},
startLoader: function(){
$('.feed-post-btn').addClass('btn-default').removeClass('btn-success').prop('disabled', true).find('span').hide();
$('.feed-post-btn').find('i').attr('class', 'fa fa-cog fa-spin fa-2x fa-fw');
},
compilePost: function(instance) {
var editor = $('#main_question_box .summernote');
var isEmpty = $(editor).summernote('isEmpty');
if(!isEmpty){
instance.feed_body = $(editor).summernote('code');
instance.post_ready = true;
}else{
instance.post_ready = false;
}
}
}
}
</script>
My Web.php
Route::post('/timeline', 'FeedController@storeFeed');
내 컨트롤러
public function storeFeed(Request $request)
{
if($request->feed_type == 'Debate'){
$this->validate(request(), [
'feed_subject' => 'required',
'feed_body' => 'required',
]);
$publishedFeed = Auth::user()->publishDebate($request);
}elseif($request->feed_type == 'Question'){
$this->validate(request(), [
'feed_body' => 'required',
]);
$publishedFeed = Auth::user()->publishQuestion($request);
}else{
$this->validate(request(), [
'feed_body' => 'required',
]);
$publishedFeed = Auth::user()->publishPost($request);
}
return $publishedFeed->id;
}
내 HTML 헤드
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="login-status" content="{{ Auth::check() }}">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
나의 자원들부트스트랩.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');
}
나는 이 문제를 재현할 수 있다.
- 정상적으로 Vuejs/Laravel 앱을 사용하십시오.
컨트롤러에서 \Session::flush()로 페이지 새로 고침
public function getProduct(Request $request) { \Session::flush(); return view('product'); }클라이언트에 put/post 요청하기 ->상태 코드 419로 요청 실패
- 이것은 개발 중에 세션이 만료되어 세션 수명을 더 높은 숫자로 설정하여 문제가 해결되는지 확인할 수 있음을 의미한다.
참조URL: https://stackoverflow.com/questions/47391838/laravel-axios-failed-with-status-code-419-using-vue
반응형
'IT이야기' 카테고리의 다른 글
| Vuejs2: 감시자를 어떻게 파괴할 수 있을까? (0) | 2022.05.08 |
|---|---|
| 로거의 다른 레벨을 다른 대상에 기록하도록 Logback을 구성하는 방법 (0) | 2022.05.07 |
| 다른 디렉토리의 헤더 파일 포함 (0) | 2022.05.07 |
| VS 코드의 Vuex 스토어에 대한 인텔리센스 (0) | 2022.05.07 |
| 오류: 렌더 함수에서 반환된 여러 루트 노드.v-dv-group 출신 (0) | 2022.05.07 |