来自JS变量的数据正在被缓存

Question

我的服务器上有一个JSON文件，每5分钟更新一次。但是，在更新JSON文件后刷新我的站点时，数据被缓存，并且在硬刷新之前不显示最新数据。

如何避免这种情况并确保显示最新的数据集?

我在header中有这个:

<meta http-equiv="Expires" CONTENT="0">

这是我在页面加载时运行的函数:

let buildings = [];
async function getWG() {
let updated = await fetch('cron_log.txt');
updated = await updated.text();
let updateText = document.getElementById("updated");
updateText.innerHTML = '';
updateText.innerHTML = 'Updated: ' + updated + ' EST';
console.log(updated);
if(buildings.length < 1){
let response = await fetch('wg_data.json');
buildings = await response.json();  
buildings.sort(function (a, b) {
return a.fee - b.fee;
});
}

//console.log(buildings);

let element = document.getElementById("mainData");
element.innerHTML = '';

//loop thru array of buildings
for (var x = 0; x < buildings.length; x++){
//document.write(buildings[x].community);
if(!buildings[x].closed){
let row = '<div class="row"><div class="col community">' + buildings[x].community + '</div><div class="col landid">' + buildings[x].landId + '</div><div class="col type">' + buildings[x].type + '</div><div class="col fee">' + (buildings[x].fee + 1000) + '</div><div class="col rank">' + buildings[x].rank + '</div></div>';
element.innerHTML += row;     
}
}
}

这是我的PHP文件，每5分钟调用一次，检索最新的数据，然后保存到JSON文件:

$curl = curl_init();
$url = test.com;
curl_setopt_array($curl, array(
CURLOPT_URL => $url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => '',
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => 'GET',
));
$response = curl_exec($curl);
$data = json_decode($response,true);

Answer 1

From this:

let response = await fetch('wg_data.json');
buildings = await response.json();  

看起来您获取了一个静态文件。你可以配置你的web服务器添加一个头文件来立即过期这个文件的数据，这将告诉浏览器不要依赖它的内部缓存。

或者，您可以欺骗浏览器每次请求一个新文件，从而避免使用本地缓存。为此，可以创建一个惟一的URL，例如:

let response = await fetch('wg_data.json?t=' + new Date().valueOf());
buildings = await response.json();  

每次生成一个新的URL，例如'wg_data.json?t=1672100283407'。服务器忽略URL参数，只发送文件。

您可能也需要对fetch('cron_log.txt')做同样的操作。