文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Laravel、Vue-2、vue-composer的Ajax中出现POST错误

问使用Laravel、Vue-2、vue-composer的Ajax中出现POST错误
EN

Stack Overflow用户

提问于 2017-03-06 14:48:06

回答 2查看 933关注 0票数 0

我正在OS X上做一个学习项目，使用Laravel，Vagrant，Vue 2(使用vue-resource)，在选择要上传的视频文件后收到几个错误：

控制台错误#1：

    POST http://view.app:8000/videos 500 (Internal Server Error)
    (anonymous) @ vue-resource.common.js?2f13:1068
    PromiseObj @ vue-resource.common.js?2f13:198
    xhrClient @ vue-resource.common.js?2f13:1014
    sendRequest @ vue-resource.common.js?2f13:1174
    exec @ vue-resource.common.js?2f13:1129
    next @ vue-resource.common.js?2f13:1155
    before @ vue-resource.common.js?2f13:970
    exec @ vue-resource.common.js?2f13:1129
    next @ vue-resource.common.js?2f13:1155
    method @ vue-resource.common.js?2f13:984
    exec @ vue-resource.common.js?2f13:1129
    next @ vue-resource.common.js?2f13:1155
    body @ vue-resource.common.js?2f13:849
    exec @ vue-resource.common.js?2f13:1129
    next @ vue-resource.common.js?2f13:1155
    jsonp @ vue-resource.common.js?2f13:957
    exec @ vue-resource.common.js?2f13:1129
    next @ vue-resource.common.js?2f13:1155
    header @ vue-resource.common.js?2f13:1004
    exec @ vue-resource.common.js?2f13:1129
    next @ vue-resource.common.js?2f13:1155
    cors @ vue-resource.common.js?2f13:826
    exec @ vue-resource.common.js?2f13:1129
    (anonymous) @ vue-resource.common.js?2f13:1158
    PromiseObj @ vue-resource.common.js?2f13:198
    Client @ vue-resource.common.js?2f13:1122
    Http @ vue-resource.common.js?2f13:1359
    Http.(anonymous function) @ vue-resource.common.js?2f13:1397
    store @ VideoUpload.vue?1c05:48
    boundFn @ vue.common.js?e881:127
    fileInputChange @ VideoUpload.vue?1c05:40
    boundFn @ vue.common.js?e881:126
    invoker @ vue.common.js?e881:1637

控制台错误#2：

    upload:1 Uncaught (in promise) 
    Response
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* body: "<!DOCTYPE html>↵<html>↵    <head>↵        <meta charset="UTF-8" />↵        <meta name="robots" content="noindex,nofollow" />↵        <style>↵            /* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html */↵            html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}↵↵            html { background: #eee; padding: 10px }↵            img { border: 0; }↵            #sf-resetcontent { width:970px; margin:0 auto; }↵                        .sf-reset { font: 11px Verdana, Arial, sans-serif; color: #333 }↵            .sf-reset .clear { clear:both; height:0; font-size:0; line-height:0; }↵            .sf-reset .clear_fix:after { display:block; height:0; clear:both; visibility:hidden; }↵            .sf-reset .clear_fix { display:inline-block; }↵            .sf-reset * html .clear_fix { height:1%; }↵            .sf-reset .clear_fix { display:block; }↵            .sf-reset, .sf-reset .block { margin: auto }↵            .sf-reset abbr { border-bottom: 1px dotted #000; cursor: help; }↵            .sf-reset p { font-size:14px; line-height:20px; color:#868686; padding-bottom:20px }↵            .sf-reset strong { font-weight:bold; }↵            .sf-reset a { color:#6c6159; cursor: default; }↵            .sf-reset a img { border:none; }↵            .sf-reset a:hover { text-decoration:underline; }↵            .sf-reset em { font-style:italic; }↵            .sf-reset h1, .sf-reset h2 { font: 20px Georgia, "Times New Roman", Times, serif }↵            .sf-reset .exception_counter { background-color: #fff; color: #333; padding: 6px; float: left; margin-right: 10px; float: left; display: block; }↵            .sf-reset .exception_title { margin-left: 3em; margin-bottom: 0.7em; display: block; }↵            .sf-reset .exception_message { margin-left: 3em; display: block; }↵            .sf-reset .traces li { font-size:12px; padding: 2px 4px; list-style-type:decimal; margin-left:20px; }↵            .sf-reset .block { background-color:#FFFFFF; padding:10px 28px; margin-bottom:20px;↵                border-bottom-right-radius: 16px;↵                border-bottom-left-radius: 16px;↵                border-bottom:1px solid #ccc;↵                border-right:1px solid #ccc;↵                border-left:1px solid #ccc;↵                word-wrap: break-word;↵            }↵            .sf-reset .block_exception { background-color:#ddd; color: #333; padding:20px;↵                border-top-left-radius: 16px;↵                border-top-right-radius: 16px;↵                border-top:1px solid #ccc;↵                border-right:1px solid #ccc;↵                border-left:1px solid #ccc;↵                overflow: hidden;↵                word-wrap: break-word;↵            }↵            .sf-reset a { background:none; color:#868686; text-decoration:none; }↵            .sf-reset a:hover { background:none; color:#313131; text-decoration:underline; }↵            .sf-reset ol { padding: 10px 0; }↵            .sf-reset h1 { background-color:#FFFFFF; padding: 15px 28px; margin-bottom: 20px;↵                border-radius: 10px;↵                border: 1px solid #ccc;↵            }↵        </style>↵    </head>↵    <body ondblclick="var t = event.target; if (t.title && !t.href) { var f = t.innerHTML; t.innerHTML = t.title; t.title = f; }">↵                    <div id="sf-resetcontent" class="sf-reset">↵                <h1>Whoops, looks like something went wrong.</h1>↵                                        <h2 class="block_exception clear_fix">↵                            <span class="exception_counter">1/1</span>↵                            <span class="exception_title"><abbr title="Illuminate\Session\TokenMismatchException">TokenMismatchException</abbr> in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php line 68">VerifyCsrfToken.php line 68</a>:</span>↵                            <span class="exception_message"></span>↵                        </h2>↵                        <div class="block">↵                            <ol class="traces list_exception">↵       <li> in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php line 68">VerifyCsrfToken.php line 68</a></li>↵       <li>at <abbr title="Illuminate\Founda…ate\Foundation\Http\Middleware\TransformsRequest">TransformsRequest</abbr>->handle(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>), <em>object</em>(<abbr title="Closure">Closure</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php line 148">Pipeline.php line 148</a></li>↵       <li>at <abbr title="Illuminate\Pipeline\Pipeline">Pipeline</abbr>->Illuminate\Pipeline\{closure}(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php line 53">Pipeline.php line 53</a></li>↵       <li>at <abbr title="Illuminate\Routing\Pipeline">Pipeline</abbr>->Illuminate\Routing\{closure}(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php line 30">TransformsRequest.php line 30</a></li>↵       <li>at <abbr title="Illuminate\Foundation\Http\Middleware\TransformsRequest">TransformsRequest</abbr>->handle(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>), <em>object</em>(<abbr title="Closure">Closure</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php line 148">Pipeline.php line 148</a></li>↵       <li>at <abbr title="Illuminate\Pipeline\Pipeline">Pipeline</abbr>->Illuminate\Pipeline\{closure}(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php line 53">Pipeline.php line 53</a></li>↵       <li>at <abbr title="Illuminate\Routing\Pipeline">Pipeline</abbr>->Illuminate\Routing\{closure}(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ValidatePostSize.php line 27">ValidatePostSize.php line 27</a></li>↵       <li>at <abbr title="Illuminate\Foundation\Http\Middleware\ValidatePostSize">ValidatePostSize</abbr>->handle(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>), <em>object</em>(<abbr title="Closure">Closure</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php line 148">Pipeline.php line 148</a></li>↵       <li>at <abbr title="Illuminate\Pipeline\Pipeline">Pipeline</abbr>->Illuminate\Pipeline\{closure}(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php line 53">Pipeline.php line 53</a></li>↵       <li>at <abbr title="Illuminate\Routing\Pipeline">Pipeline</abbr>->Illuminate\Routing\{closure}(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php line 46">CheckForMaintenanceMode.php line 46</a></li>↵       <li>at <abbr title="Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode">CheckForMaintenanceMode</abbr>->handle(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>), <em>object</em>(<abbr title="Closure">Closure</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php line 148">Pipeline.php line 148</a></li>↵       <li>at <abbr title="Illuminate\Pipeline\Pipeline">Pipeline</abbr>->Illuminate\Pipeline\{closure}(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php line 53">Pipeline.php line 53</a></li>↵       <li>at <abbr title="Illuminate\Routing\Pipeline">Pipeline</abbr>->Illuminate\Routing\{closure}(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php line 102">Pipeline.php line 102</a></li>↵       <li>at <abbr title="Illuminate\Pipeline\Pipeline">Pipeline</abbr>->then(<em>object</em>(<abbr title="Closure">Closure</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php line 149">Kernel.php line 149</a></li>↵       <li>at <abbr title="Illuminate\Foundation\Http\Kernel">Kernel</abbr>->sendRequestThroughRouter(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>)) in <a title="/home/vagrant/www/view/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php line 116">Kernel.php line 116</a></li>↵       <li>at <abbr title="Illuminate\Foundation\Http\Kernel">Kernel</abbr>->handle(<em>object</em>(<abbr title="Illuminate\Http\Request">Request</abbr>)) in <a title="/home/vagrant/www/view/public/index.php line 53">index.php line 53</a></li>↵    </ol>↵</div>↵↵            </div>↵    </body>↵</html>"
*/
    bodyBlob: Blob
    bodyText: Promise
    Objdata: (...)
    headers: Headers
    ok: false
    status: 500
    statusText: "Internal Server Error"
    url: "/videos"
    get data: get()
    set data: set(body)        
    __proto__: Object

还得到一个XHR错误：

    TokenMismatchException in VerifyCsrfToken.php line 68:
    in VerifyCsrfToken.php line 68
    at VerifyCsrfToken->handle(object(Request), object(Closure)) 
    in Pipeline.php line 148
    at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) 
    in Pipeline.php line 53
    at Pipeline->Illuminate\Routing\{closure}(object(Request)) 
    in ShareErrorsFromSession.php line 49
    at ShareErrorsFromSession->handle(object(Request), object(Closure))                    in Pipeline.php line 148
    at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
    at Pipeline->Illuminate\Routing\{closure}(object(Request)) in StartSession.php line 64
    at StartSession->handle(object(Request), object(Closure)) in Pipeline.php line 148
    at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
    at Pipeline->Illuminate\Routing\{closure}(object(Request)) in AddQueuedCookiesToResponse.php line 37
    at AddQueuedCookiesToResponse->handle(object(Request), object(Closure)) in Pipeline.php line 148
    at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
    at Pipeline->Illuminate\Routing\{closure}(object(Request)) in EncryptCookies.php line 59
    at EncryptCookies->handle(object(Request), object(Closure)) in Pipeline.php line 148
    at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
    at Pipeline->Illuminate\Routing\{closure}(object(Request)) in Pipeline.php line 102
    at Pipeline->then(object(Closure)) in Router.php line 561
    at Router->runRouteWithinStack(object(Route), object(Request)) in Router.php line 520
    at Router->dispatchToRoute(object(Request)) in Router.php line 498
    at Router->dispatch(object(Request)) in Kernel.php line 174
    at Kernel->Illuminate\Foundation\Http\{closure}(object(Request)) in Pipeline.php line 30
    at Pipeline->Illuminate\Routing\{closure}(object(Request)) in TransformsRequest.php line 30
    at TransformsRequest->handle(object(Request), object(Closure)) in Pipeline.php line 148
    at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
    at Pipeline->Illuminate\Routing\{closure}(object(Request)) in TransformsRequest.php line 30
    at TransformsRequest->handle(object(Request), object(Closure)) in Pipeline.php line 148
    at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
    at Pipeline->Illuminate\Routing\{closure}(object(Request)) in ValidatePostSize.php line 27
    at ValidatePostSize->handle(object(Request), object(Closure)) in Pipeline.php line 148
    at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
    at Pipeline->Illuminate\Routing\{closure}(object(Request)) in CheckForMaintenanceMode.php line 46
    at CheckForMaintenanceMode->handle(object(Request), object(Closure)) in Pipeline.php line 148
    at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
    at Pipeline->Illuminate\Routing\{closure}(object(Request)) in Pipeline.php line 102
    at Pipeline->then(object(Closure)) in Kernel.php line 149
    at Kernel->sendRequestThroughRouter(object(Request)) in Kernel.php line 116
    at Kernel->handle(object(Request)) in index.php line 53

那个CSRF错误让我首先想到我应该从那里开始。我偶然发现了这个Laravel文档(X-CSRF-TOKEN)，但我只是不确定如果这是问题所在，应该把它放在哪里。

我也遇到了很多关于vue-resource的讨论，以及Axios如何成为更好的选择。如果这不是CSRF的问题，那么从vue-resource切换到Axios值得吗？

最后，也许我只需要在Laravel中重新创建项目，看看是否就是这样。这是可取的吗？对于这个初学者的问题，我很抱歉，但我很感谢大家的帮助。

VideoUpload.vue

      <template>
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="panel panel-default">
                            <div class="panel-heading">Example</div>

                            <div class="panel-body">
                                <input type="file" name="video" id="video" @change="fileInputChange" v-if="!uploading">

                                        <div id="video-form" v-if="uploading && !failed">
                                    Form
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <script>
            export default {
                data() {
                    return {
                        uploading: false,
                        uploadingComplete: false,
                        failed: false,
                        title: 'Untitled',
                        description: null,
                        visibility: 'private'
                    }
                },
                methods: {
                    fileInputChange() {
                        this.uploading = true;
                        this.failed = false;

                        this.file = document.getElementById('video').files[0];

                        this.store().then(() => {
                            //upload the video
                        })

                        //store the metadata
                        //upload the video
                    },
                    store() {
                        return this.$http.post('/videos', {
                           title: this.title,
                           description: this.description,
                           visibility: this.visibility, 
                           extension: this.file.name.split('.').pop() 
                        }).then((response) => {
                            console.log(response.json());
                        });
                    }
                },

                mounted() {
                    console.log('Component mounted.')
                }
            }
        </script>

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.3.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "video.js": "^5.11.6",
    "vue": "^2.2.1",
    "vue-resource": "^1.2.1"
  }
}

我一定是做错了什么。我看到在源代码中引用了csrf-token。正在添加源：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSRF Token -->
        <meta name="csrf-token" content="8WH63seUHqELXf6NFMv5FY6OYHbvYZoVVrBeoQAR">

        <title>View</title>

        <!-- Styles -->
        <link href="http://view.app:8000/css/app.css" rel="stylesheet">

        <!-- Scripts -->
        <script>
            window.Laravel = {"csrfToken":"8WH63seUHqELXf6NFMv5FY6OYHbvYZoVVrBeoQAR"};
        </script>
    </head>
    <body>
            <div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand" href="http://view.app:8000">
                        View
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                        &nbsp;
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                                                <li><a href="http://view.app:8000/upload">Upload</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    Stephen <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="http://view.app:8000/channel/StephenChannel">Your channel</a>
                                        <a href="http://view.app:8000/channel/StephenChannel/edit">Channel settings</a>

                                        <a href="http://view.app:8000/logout"
                                            onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>

                                        <form id="logout-form" action="http://view.app:8000/logout" method="POST" style="display: none;">
                                            <input type="hidden" name="_token" value="8WH63seUHqELXf6NFMv5FY6OYHbvYZoVVrBeoQAR">
                                        </form>
                                    </li>
                                </ul>
                            </li>
                                        </ul>
                </div>
            </div>
        </nav>
                <div id='video-upload-component'>
            <video-upload></video-upload>
        </div>

        <!-- Scripts -->
        <script src="http://view.app:8000/js/app.js"></script>
    </body>
    </html>

vue-resource

php

laravel

vue.js

vuejs2

回答 2

Stack Overflow用户

发布于 2017-03-06 15:02:41

根据您的"XHR错误“，这意味着当您发出CSRF 请求时，您没有发送令牌。

根据laravel路由规则，中间件起作用，并且在不同的中间件之间有ValidateCSRFToken。它检查您是否正在发送有效的CSRF令牌。

请将其添加到您的AJAX请求中。

看看能不能成功。

票数 0

Stack Overflow用户

发布于 2017-03-07 01:22:22

您需要发送CSRF令牌。

在HEAD元素中添加以下内容：

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

如果您使用jQuery：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42619195

复制

相似问题

问使用Laravel、Vue-2、vue-composer的Ajax中出现POST错误
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Laravel、Vue-2、vue-composer的Ajax中出现POST错误EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Laravel、Vue-2、vue-composer的Ajax中出现POST错误
EN