我正在使用Vra.js与Laravel一起使用fetch api上传文件。我已将csrf标记添加到请求的标头中，但仍然获得419未知状态。任何帮助将不胜感激。
这是组件的JS
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Handlebars Pagination</title>
<link href="main.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="handlebars.min.js"></script>
<script src="functions.js"></script>
</head>
<body class="container">
<div id="posts"></div>
<h3>Filter Content</h3>
<form action="" id="filter-form" name="filter-form" method="post">
<input type="text" id="searchText" name="searchText"/>
<input type="submit" value="submit"/>
</form>
<div id="acfilter-content">
<div id="posts"></div>
<script id="post-template" type="text/x-handlebars-template">
<div class="score-structural score-column2-wideright search-listings post">
<div class="score-right">
<h4>{{record_count}}</h4>
<h5 style="z-index: 1;">
<a href="#"> {{ title }} </a>
</h5>
<p style="z-index: 1;"> {{ desc }} </p>
</div>
</div>
<hr>
</script>
<script id="pagination-template" type="text/x-handlebars-template">
<ul class="pagination">
<li class="pagination-prev"><a href="#">«</a></li>
{{#each pages}}
<li class="pagination-page" data-page="{{this}}"><a href="#">{{this}}</a></li>
{{/each}}
<li class="pagination-next"><a href="#">»</a></li>
</ul>
</script>
<script>
$(function () {
var opts = {
pageMax: 2,
postsDiv: $('#posts'),
dataUrl: "index.php"
}
function loadPosts(posts) {
opts.postsDiv.empty();
posts.each(function () {
var source = $("#post-template").html();
var template = Handlebars.compile(source);
var context = {
title: this.title,
desc: this.body,
};
var html = template(context);
opts.postsDiv.append(html);
});
hidePrev();
}
function hidePrev() { $('.pagination .pagination-prev').hide(); }
function showPrev() { $('.pagination .pagination-prev').show(); }
function hideNext() { $('.pagination .pagination-next').hide(); }
function showNext() { $('.pagination .pagination-next').show(); }
function paginate(page,pageCount) {
var source = $("#pagination-template").html();
var template = Handlebars.compile(source);
var context = { pages: range(page,pageCount) };
console.log(range(page,pageCount));
var html = template(context);
var paginationTag = opts.postsDiv.parent().find(".pagination");
paginationTag.length > 0 ? paginationTag.replaceWith(html) : opts.postsDiv.after(html);
function changePage(page) {
pageItems.removeClass('active');
pageItems.filter('[data-page="' + page + '"]').addClass('active');
loadPosts(data.slice(page * opts.pageMax - opts.pageMax, page * opts.pageMax));
paginate(page,pageCount);
if (gotoPageNumber <= 1) {
hidePrev();
}
}
var pageItems = $('.pagination>li.pagination-page');
var pageItemsLastPage = $('.pagination li').length - 2;
pageItems.removeClass('active');
pageItems.filter('[data-page="' + page + '"]').addClass('active');
pageItems.on('click', function () {
getDataPageNo = this.getAttribute('data-page')
console.log(getDataPageNo)
changePage(getDataPageNo);
if (getDataPageNo == 1) {
hidePrev()
}
else if (getDataPageNo == pageItemsLastPage) {
hideNext();
}
else {
showPrev();
showNext();
}
});
$('.pagination>li.pagination-prev').on('click', function () {
gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) - 1;
changePage(gotoPageNumber);
});
$('.pagination>li.pagination-next').on('click', function () {
gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) + 1;
if (gotoPageNumber > pageCount) {
gotoPageNumber = 1;
showPrev();
}
changePage(gotoPageNumber);
});
}
$("#filter-form").submit(function(e) {
var pageNumber = parseInt($('.pagination>li.active').attr('data-page'));
if(!pageNumber) pageNumber = 1;
var searchText = arasjQuery('#searchText').val();
$.ajax({
dataType: 'json',
url: opts.dataUrl,
type: 'POST',
data: {
'searchText': searchText,
'pageNumber': pageNumber
},
success: function (response_json) {
if(response_json){
console.log(response_json);
data = $(response_json.records.page);
//dataCount = data.length;
dataCount = response_json.recourd_count;
pageCount = Math.ceil(dataCount / opts.pageMax);
console.log(pageCount);
if (dataCount > opts.pageMax) {
paginate(1,pageCount);
posts = data.slice(0, opts.pageMax);
} else {
posts = data;
}
loadPosts(posts);
}else{
alert("No Data");
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
});
</script>
</div>
</body>
</html>
答案 0 :(得分：1)
我知道这是一个老问题，但是当使用fetch时，我也遇到了这个问题，而链接的答案（Laravel 5.5 ajax call 419 (unknown status)）却无济于事，因为这与jQuery的Ajax方法有关。 / p>
对于那些面临相同问题的用户来说，这似乎是由于默认的credentials设置（默认为“忽略”）所致，该设置由于某种原因而实际上省略了csrf标头。您可以根据需要通过将credentials更改为“ same-origin”或“ include”来解决此问题。
示例：
fetch("/leads", {
method: 'POST',
credentials: "same-origin",
headers: csrf_header
}).then(res => res.json())
.then(
(json) => {
this.setState({
isLoaded: true,
items: json.leads.data,
sort: json.sort,
search: json.search,
sort_by: json.sort_by,
filter: json.filter
});
}
);