跨域請求的快取問題

本文撰寫源自書摘，轉換為個人了解的版本。
先前，一個產品服務如果想做到跨越不同的資源進行 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