为什么我的获取在服务器上失败，而在本地主机上却没有?array.slice也会中断fetch

Question

我有一段javascript，它应该得到一个充满问题的JSON文件，然后将这些问题保存到本地存储。但是，当我将项目移动到LAMP服务器时，fetch将停止工作。

$('#start_exam').click(function(){

// Get # of questions and set localstorage
var nrOfQuestions = $("#nrOfQuestions").val();
localStorage.setItem("nrOfQuestions", nrOfQuestions);

// Set initial localstorage values
localStorage.setItem("passed", 0);
localStorage.setItem("failed", 0);
localStorage.setItem("index", 1);

// Fetch questions, randomize, and load into localstorage
fetch('/data/questions.json');
fetch('/data/questions.json')
.then(res => res.json())
.then((loadedQuestions) => {
//console.log('Output: ', loadedQuestions);
var questions = shuffle(loadedQuestions);
//questions = questions.slice(0, nrOfQuestions);
localStorage.setItem('questions', JSON.stringify(questions));
})
.catch(function(err) {
console.log('Fetch Error :-S', err);
})
;

// Shuffle questions in the array
function shuffle(sourceArray) {
for (var i = 0; i < sourceArray.length - 1; i++) {
var j = i + Math.floor(Math.random() * (sourceArray.length - i));
var temp = sourceArray[j];
sourceArray[j] = sourceArray[i];
sourceArray[i] = temp;
}
return sourceArray;
}

// Redirect
window.location.href = "/test.html";

});

我通过在获取之前添加fetch('/data/questions.json');(以前在本地机器上工作(，使其重新工作。但我完全不确定为什么这是有效的，而且它根本没有遵循正确的语法。错误为：

Fetch failed loading: GET 'url'

在提交到本地存储之前，我还必须注释掉对阵列进行切片以使其变短的行：//questions = questions.slice(0, nrOfQuestions);。如果我取消注释那行代码，我会得到一个读取array.slice is not a function的错误

有人有什么想法吗？这两个问题都只发生在我的服务器上。

我在htaccess中遗漏了什么吗？我需要安装服务器端nodejs吗？？我不知道。

Answer 1

原来我只是在fetch运行完成之前重新加载页面。。。我不完全确定为什么它在本地主机上工作，但在服务器上不工作。也许fetch在服务器上检索文件的时间比在我的机器上要长？

我所做的只是在数组中移动窗口重定向。感谢@epascarello帮助我发现了我的新手错误。

不管怎样，这就是我现在的代码——它运行得很好：

$('#start_exam').click(function(){

// Get # of questions and set localstorage
var nrOfQuestions = $("#nrOfQuestions").val();
localStorage.setItem("nrOfQuestions", nrOfQuestions);

// Set initial localstorage values
localStorage.setItem("passed", 0);
localStorage.setItem("failed", 0);
localStorage.setItem("index", 1);
localStorage.removeItem("questions");

// Fetch questions, randomize, and load into localstorage
fetch('/data/questions.json')
.then(res => res.json())
.then((loadedQuestions) => {
//console.log('Output: ', loadedQuestions);
var questions = shuffle(loadedQuestions);
questions = questions.slice(0, nrOfQuestions);
localStorage.setItem('questions', JSON.stringify(questions));
// Redirect
window.location.href = "/test.html";
})
.catch(function(err) {
console.log('Fetch Error:', err);
})
;

// Shuffle questions in the array
function shuffle(sourceArray) {
for (var i = 0; i < sourceArray.length - 1; i++) {
var j = i + Math.floor(Math.random() * (sourceArray.length - i));
var temp = sourceArray[j];
sourceArray[j] = sourceArray[i];
sourceArray[i] = temp;
}
return sourceArray;
}

});

我不知道为什么这条额外的线路看起来有些什么——它最终停止了工作。