如何讓html img標籤發送的http請求附加某個http header?

背景:

我所開發的網頁中用戶頭像的url不會隨著指向的文件的改變而改變url地址(頭像文件存儲在Azure上,直接調用Azure的上傳地址來更新資源).

1. url後面沒有timestamp之類的參數。

2. 資源更新之後。http Resonse中的etag和last modified的值是會隨著改變的。

3. 現有的cache-control的值是 no-cache.

現在的情況是無論圖片有沒有改變。都會從Azure上下載資源。沒有緩存造成圖片出來的比較慢。

現在我想利用etag來檢測是否緩存是否新鮮。所以想讓每個img發送的請求中都帶上If-None-Match: &頭部來做圖片緩存。 但是現在不知道怎麼讓img標籤自己發送的http請求帶上相應的數據。

謝謝。

1. Web API 目前沒有給 & 指定附加 http 頭的能力，可以預見的將來也不太可能有。

2. 根據 HTTP 協議，no-cache 已經要求客戶端（瀏覽器）不保存緩存，所以就算有 etag、last-modified 也沒用，因為根本不會記錄下來 —— 緩存都沒有，記錄這個幹嗎？

3. 就算你發出 If-None-Match: & 也沒用，因為關鍵的問題是：壓根沒緩存。

總結：你的問題在於，既然你想要有緩存，那麼就必須去掉 no-cache。只要沒設置 no-cache 之類禁止緩存的頭，瀏覽器對資源自然會自己處理緩存，包括自動發 If-None-Match。

【更新：我對 no-cache 的描述有偏差，請看評論。】

no-cache 表示每次請求資源都會去伺服器檢查資源是否有更新，如果沒有更新，就會返回304響應，這個消耗應該不大。每次都下載（200響應）的這種，對應的是no-store。

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn

如果設置了no-cache，而每次返回200響應，應該

1. 檢查伺服器配置是否正確
2. 瀏覽器是否使用了disabled cache

更好的解決辦法是，每次上傳資源都生成新的圖片地址，這樣就可以用maxage=1年的cache，只是你要恰當地處理伺服器文件的冗餘

-------------- 在這裡更新一下 知乎的編輯問題出bug選不了修改原因了

發現現在實際上是會緩存的。請求的時候瀏覽器會監測一次新鮮度。如果新鮮會返回304. 之前一直是200的原因是我chrome的dev tools的配置中開啟了disable cache when devtools is open選項。。