如何在JavaScript中使用Cache-Control？报Unexpected token ':'错误如何解决？

报错原因 #

你代码中写的Cache-Control: no-cache, max-age='3600'是HTTP响应头的配置语法，不属于合法的JavaScript语句，直接裸写在JS函数中不符合JS语法规则，因此会抛出Unexpected token ':'的语法错误。

可行的缓存控制实现方法 #

• 如果你是要给AJAX/Fetch请求添加缓存控制规则，可以在请求配置的headers字段中传入该配置，示例：

// fetch 请求示例
fetch('/your-request-url', {
  headers: {
    'Cache-Control': 'no-cache, max-age=3600'
  }
})

• 如果你是要处理静态资源URL避免命中旧缓存，可以修改你的URL处理函数，给资源地址添加动态时间戳参数，让浏览器识别为新资源不走缓存：

function calcURL(urlIn) {
  const url = new URL(urlIn, window.location.origin);
  // 添加时间戳参数，每次生成的URL都不同，不会命中旧缓存
  url.searchParams.set('_t', Date.now());
  return url.toString();
}

• 如果你是要控制整个站点的缓存规则，最稳妥的方案是在服务端配置HTTP响应头的Cache-Control字段，从根源上控制浏览器的缓存策略，不需要依赖前端JS处理。

内容的提问来源于stack exchange，提问作者user17112781