У меня возникла проблема при попытке включить кэширование в браузере изображений s3. У меня есть приложение angularjs, развернутое на Heorku. Мое приложение использует изображения, хранящиеся в ведре s3. Поскольку в нем много изображений, я хочу, чтобы браузер запрашивал файл, сохранял его в кеше и затем использовал кеш, но независимо от того, что я делаю, я не могу заставить браузер запрашивать файл из кеша. Я вижу, что он запрашивает файл, затем я перезагружаю страницу, и он снова получает тот же файл.
Я попытался установить следующие заголовки в моем индексе. 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
Как видите, заголовки ответа имеют Cache-Control: public, max-age=31536000, это устанавливается в данный момент изображение загружено в s3, поэтому я представляю, что этим s3 служит файл с правильным заголовком.
В заголовке запроса я вижу Cache-Control: no-cache, я думаю, что это может быть причиной того, почему эти изображения не кэшируются, но я не уверен и не знаю, как это изменить, после всех прочитанных мной документов я действительно думал, что необходимо установить элемент управления кэшем для объекта s3, и это было бы, есть ли что-то, чего мне не хватает заставить это работать?
Мой сервер простой expressjs, обслуживающий папку stati c dist, остальное происходит внутри приложения angularJS.
Любой помощь с этим будет принята с благодарностью! это то, что вне меня, слишком много серверной работы, которую я нахожу трудной для понимания!
Если кто-то спросит, это angularJS, а не Angular, потому что это то, что я начал, когда Angular был в бета-версии, и как только у меня это заработало, и у некоторых клиентов все это произошло, и я так и не смог перейти, но я планирую сделать это в ближайшее время, мне просто нужно, чтобы это работало немного дольше!
Обновление Я пытался разными способами установить заголовки в express, но независимо от того, что я делаю, я всегда вижу один и тот же заголовок в браузере. Я также попытался установить заголовки в коде HTML, думая, что maaaaybe они читаются, и nocache заставляет кэш изображений не работать, но не повезло и там.
В чем может быть причина? это проблема s3, проблема с сервером, angularjs проблема? я также не нашел способа настроить способ запроса изображений в angularjs, единственный элемент управления кэшем, который у меня есть, - это запросы, которые я отправляю на сервер, у меня закончились варианты, так как я не хочу думать, что я нужно потратить больше денег на что-то вроде cloudflare, когда это можно сделать, думая, что мы все уже имеем, любая помощь будет очень признательна !!!