2019年4月13日 星期六

跨域請求的快取問題

本文撰寫源自書摘,轉換為個人了解的版本。
先前,一個產品服務如果想做到跨越不同的資源進行 OAuth 請求,亦或是在瀏覽器端想做跨域請求,會碰到一個快取的問題 (請參考如下)。

瀏覽器的快取發生問題的情景:

A: example.com, B: helloworld.com, C: api.com/api/v2/user?fetch=data


  1.  A 網站請求 C 的資源,此時 C 之回應內容被快取。
  2.  B 網站請求 C 的資源,此時因為 C 已經有存放快取,所以把快取內容提出。
C 的請求因為早被快取,導致下一個請求會在快取有效時間內不會被重新再拉出請求,導致 AB 兩個不同的服務需要不同資料時,造成快取混亂的困擾。

以往在開發情景解決此問題上,都是很簡單的打開了 Disable Cache ,使開發上被蒙蔽了雙眼。



解決方案


在 Server 端,如果 "Access-Control-Allow-Origin" 設定為 "*" (表示對所有來源請求有效),應該在 Header 多設定一個參數: "Vary" 為 "Origin", "Vary" 的設定為 "Origin" 時,會令不同來源(不同網站瀏覽時,此文形容為 A,B) 對 C 網站做不同的快取儲存。


Access-Control-Allow-Origin: *Vary: Origin

但在 Spec 上建議 [2] 指出如果  "Access-Control-Allow-Origin" 已針對某個來源鎖定,則不需要使用 "Vary"。


這篇文章提醒了自己先前可能遇過在開發這樣的產品服務時,因為測試之由打開了 Disable Cache 導致沒有發現這樣的問題。


Reference:
[1]: https://www.ithome.com.tw/voice/129558
[2]: https://fetch.spec.whatwg.org/#http-access-control-allow-origin
https://zhuanlan.zhihu.com/p/38972475
https://www.w3schools.com/js/js_json_jsonp.asp

沒有留言:

張貼留言

© ERIC RILEY , 自由無須告知轉貼
Background Japanese Sayagata by Olga Libby