Heroku 托管 angularjs 应用程序，即使使用 cache-control 我也无法让浏览器缓存 s3 图像

Question

我在尝试启用 s3 图像的浏览器缓存时遇到问题。我在 Heorku 上部署了一个 angularjs 应用程序。我的应用程序使用存储在 s3 存储桶中的图像。由于它有很多图像，我希望浏览器请求文件，将其存储在缓存中，然后使用缓存，但无论我做什么，我都无法让浏览器从缓存中请求文件。我看到它请求文件，然后我重新加载页面，它再次获得相同的文件。

我尝试在 index.html 中设置以下标题：

  <meta http-equiv="Cache-Control" content="public, max-age=604800" />
  <meta http-equiv="Pragma" content="public, max-age=604800" />

但图像仍未缓存。

这是我在 chrome 的网络面板中看到的：

**General**
RequestURL: https://localhost-mercurio.s3.amazonaws.com/1584160111310-m3r-piriapolis-letras1.jpeg
Request Method: GET
Status Code: 200 OK
Remote Address: 52.217.41.172:443
Referrer Policy: no-referrer-when-downgrade

**Response headers**
Accept-Ranges: bytes
Cache-Control: public, max-age=31536000
Content-Length: 80901
Content-Type: application/octet-stream
Date: Sat, 14 Mar 2020 04:46:38 GMT
ETag: "c5f451ebcd689f3aacee4144e80b54bf"
Last-Modified: Sat, 14 Mar 2020 04:28:34 GMT
Server: AmazonS3
x-amz-id-2: h+iya1nhpaqv/YMuqmpmVWse1JTt6HqdFzYul7SzR9BQ5wN/EyrE70VqT19j1EnmCsJKpYUllvk=
x-amz-request-id: CCEC70B9DD70C757

**Request headers**
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,es;q=0.8,it;q=0.7
Cache-Control: no-cache
Connection: keep-alive
Host: localhost-mercurio.s3.amazonaws.com
Pragma: no-cache
Referer: http://localhost:3000/
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36

如您所见，响应 headers 有 Cache-Control: public, max-age=31536000，这是在图像上传到 s3 时设置的，所以我想通过这个 s3 提供文件正确 header.

请求 header 是我看到 Cache-Control: no-cache 的地方，我认为这可能是这些图像未被缓存的原因，但我不确定也不知道如何更改它，毕竟我读过的文档我真的认为缓存控制必须在 s3 上设置 object 就是这样，我是否缺少任何东西来完成这项工作？

我的服务器是一个简单的 expressjs 服务于静态 dist 文件夹，其余发生在 angularJS 应用程序中。

如有任何帮助，我们将不胜感激！这超出了我的范围，服务器上发生的事情太多了，我觉得很难理解！

万一有人问，它是 angularJS 而不是 Angular 因为它是我在 Angular 处于测试阶段时开始的东西，一旦我开始工作，一些客户就发生了这一切我从来没有迁移过，但我计划尽快迁移，我只需要它能工作更长的时间！

更新：我尝试用不同的方法在 express 中设置 headers，但无论我做什么，我总是在浏览器中看到相同的 header。我还尝试在 HTML 代码中设置 headers，以为它们正在被读取，并且 nocache 使图像缓存不起作用，但也没有运气。

可能是什么原因？这是 s3 问题，服务器问题，angularjs 问题吗？我还发现无法配置在 angularjs 中请求图像的方式，我唯一的缓存控制是对我发送到我的服务器的请求，我运行没有选项可以尝试，因为我不想o 认为我需要花更多的钱购买像 cloudflare 这样的东西，当它可以用我们都已经拥有的想法完成时，我们将不胜感激任何帮助！！！

Answer 1

这也可能对某些人有帮助，但我所做的一切都有效，默认情况下，当 chrome 开发工具打开时，选项 "disable cache" 被勾选，所以当你测试时看看如果正在缓存内容，缓存 header 正常，但 object 未缓存。您必须取消选中该选项，重新加载页面，然后您才会看到 objects 被缓存。

Heroku 托管 angularjs 应用程序，即使使用 cache-control 我也无法让浏览器缓存 s3 图像

Heroku hosted angularjs app, i cant make the browser cache s3 images even with cache-control

caching

cache-control

amazon-s3

express

angularjs