在Laravel使用Vue.js和Vue资源调用AJAX

我使用Vue.js和Vue资源在Laravel中进行AJAX请求。在Laravel使用Vue.js和Vue资源调用AJAX

我的看法：

{{Form::open(['method' => 'post', 'class' => 'form-inline', 'id' => 'main-form'])}} 
{{Form::text('param1', null, ['id' => 'param1', 'class' => 'form-control'])}} 
{{Form::text('param2', null, ['id' => 'param2', 'class' => 'form-control'])}} 
<input @click="sendIt($event)" type="submit" value="Check prices" class="btn btn-success btn-theme" /> 
{{Form::close()}}

我有JS：

var Vue = require('vue'); 
var VueResource = require('vue-resource'); 
Vue.use(VueResource); 
Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name=_token]').attr('content'); 
const app = new Vue({ 
el: '#app', 
methods: { 
sendIt: function (e) 
    { 
     e.preventDefault(); 
     var token = $('[name="_token"]').val(); 
     this.$http.post('/data').then((response) => { 
      console.log(response); 
     }, (response) => { 
      console.log(response); 
     }); 
    } 
}

路线：

Route::post('/data', '[email protected]');

和控制器：

public function data() 
{ 
    $msg = $this->test(); //method that retrieves data from db 
    return response()->json(['msg'=> $msg], 200); 
}

它给了我后置500内部服务器错误

对此我有这样的标题：

Cache-Control 
Content-Type 
Date 
Phpdebugbar-Id 
Server 
Status 
Transfer-Encoding 
X-Powered-By

在网络中我的数据的网站我有响应头没有道理，请求头与令牌和我在请求令牌有效载荷。

如果我改变方法来获得我有同样的错误，但如果我改变方法来获得，如果我从代码我的控制器部分删除，我从数据库取回数据，只是传递字符串JSON（例如：

$msg = 'test'; 
return response()->json(['msg'=> $msg], 200);

我有成功，网页上我可以输出测试

所以我不知道，如果它的一些问题，令牌或别的东西我想这：。

var token = $('[name="_token"]').val(); 
this.$http.post('/prices', {_token:token})

但没有。同样的错误再次。

如果我补充一点：

http: { 
    headers: { 
    X-CSRF-TOKEN: document.querySelector('#token').getAttribute('content') 
    } 
},

我在页面加载语法错误。

如果我改成这样：

http: { 
    headers: { 
    Authorization: document.querySelector('#token').getAttribute('content') 
    } 
}

我再次得到了内部服务器错误。

这是我的主视图令牌：

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

<script> 
    window.Laravel = <?php echo json_encode([ 
     'csrfToken' => csrf_token(), 
    ]); ?> 
</script>

编辑：

如果我添加围绕x CSRF令牌，但仍我有令牌不匹配错误报价这部分工作。

http: { 
    headers: { 
     'X-CSRF-TOKEN': document.querySelector('#token').getAttribute('content') 
    } 
},

来源

2016-12-30 KondukterCRO

你检查了你的日志文件吗？（'存储/记录/ laravel.log'）。我想可能会有相当数量的内容，因此您最好删除该文件并再次尝试请求，然后您应该了解有关错误的更多信息。或者，如果您转到控制台中的预览选项卡，那么错误也应该存在。 –

我清除了日志文件，但没有发生新的事情。但是在预览中，我在VerifyCsrfToken.php第68行中得到了TokenMismatchException：所以它是关于令牌的。但是我发送了：| – KondukterCRO

你知道你使用的是什么版本的Vue资源？ –

我可能是错误的，但在顶部的例子中，你有：

Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name=_token]').attr('content');

然而，在你的主视图文件你有：

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

您应该能够只需将$('meta[name=_token]')更改为$('meta[name=csrf-token]')（让它们匹配）。

此外，之所以出现语法错误X-CSRF-TOKEN: ...是因为除非用引号括起来，例如'X-CSRF-TOKEN': ...，否则不能在键名中使用连字符。

希望这会有所帮助！

来源

2016-12-31 00:22:27

我改变了它，但又一次出现了相同的错误。发送相同的头文件并显示相同的令牌不匹配错误。但是现在，如果我在引号中设置带有x-csrf的http标头，则在页面加载时不会出现错误。 – KondukterCRO

@KondukterCRO'window.Laravel.csrfToken'和请求头中的令牌是否相同？ –

是的，他们是一样的 – KondukterCRO

在Laravel使用Vue.js和Vue资源调用AJAX

回答

相关问题