Question

概念：我有一个允许用户发帖的应用程序......当用户点击Ask按钮时，我尝试使用Vue.js和Axios提交问题。

问题： 70％的时间正确提交问题，但30％的时间失败并返回＆＃34;无法加载资源：服务器响应状态为419 （未知状态）＆＃34;

我的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>

我的网站.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 \ 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');
}

Answer 1

我可以重现这个问题。

正常使用Vuejs / Laravel应用。
使用控制器中的\ Session :: flush（）刷新页面 public function getProduct(Request $request) { \Session::flush(); return view('product'); }
从客户端发出放置/发布请求->请求失败，状态码为419
这可能意味着在开发中您的会话将过期，因此您可以尝试将会话生存期设置为更大的数字，以查看是否可以解决问题。

Laravel Axios使用Vue

1 个答案: