Ошибка POST в Ajax с Laravel, Vue-2, vue-composer
Я работаю над учебным проектом в 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-ЗНАК), но просто не уверен, куда его поставить, если в этом проблема.
Я также встречал много дискуссий о 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 указана в источнике. Добавление источника:
<!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">
</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>
Решение
Согласно вашей «ошибке XHR», это означает, что когда вы делаете сообщение запрос вы не отправляете токен CSRF.
Согласно правилам маршрутизации laravel, промежуточное программное обеспечение вступает в действие, и среди различных промежуточных программ существует ValidateCSRFToken. Который проверяет, отправляете ли вы действительный токен CSRF.
Пожалуйста, добавьте это к вашему запросу AJAX.
Видите, если это работает.
Другие решения
Вам необходимо отправить токен CSRF.
Добавьте это в элемент HEAD:
<meta name="csrf-token" content="{{ csrf_token() }}">
Если вы используете jQuery:
<script>$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});</script>