一個簡單解決跨網域 cookie 請求時，電腦版 Safari 瀏覽器和 iPhone 上的 Safari、Chrome、Firefox 瀏覽器預設阻擋第三方 cookie 的問題。
Demo site
採用前、後端分離開發部屬後，前端和後端的網址可能是不一樣的，當前端向後端 API 發出請求的時候就會遇到 CORS 的問題，本專案將模擬一個加入購物車的情境：
- 前端：使用 axios 發送跨網域攜帶 cookie 的請求。( 本專案 )
- 後端：Node.js + Express，使用 session 記錄使用者的購物車 id、商品 id 和商品數量( 非常粗糙的簡化，請勿使用在 Production )。( 後端專案 repository )
如果發出的跨網域請求 不需要攜帶 cookie，cors 套件可以快速啟用一個 cors 的 Express middleware，簡單解決跨網域 CORS 問題。
如果發出的跨網域請求 需要攜帶 cookie，要額外設定：
除了 Safari，電腦版的其它瀏覽器已經可以正常加入購物車，但電腦版 Safari 及 iPhone 上的 Safari、Chrome 及 Firefox 手機 App 瀏覽器預設都會阻擋第三方 Cookie，這使得後端無法透過 session 辨識前端使用者是同一個人，每次的加入購物車都會創建一個新的 cartId，購物車內的商品不會累加。
一個簡單的解決方法是讓用戶去後端網址過水一下，將前端網址重新導向後端網址，讓瀏覽器認可後端網址存取 Cookie ( 此時後端的 Cookie 已經不是第三方 Cookie，而是第一方 Cookie，因此可以順利被瀏覽器存取 )，接著，後端網址再重新導向前端網址，之後 axios 就可以順利發送跨網域攜帶 cookie 的請求，購物車內的商品會不斷累加。