為什麼我無法從跨來源 API 回應設定 Cookie？

跨源HTTP Cookie 管理：解決標頭問題

在Web 開發中，從跨源響應設定和檢索HTTP cookie 可以是一個挑戰。當您的前端應用程式與來自不同網域的後端 API 進行通訊時，就會發生這種情況。

此問題源自於現代瀏覽器強制執行的同源策略，該策略限制對來自不同網域的資源的存取不同的起源。當發出跨來源請求時，瀏覽器通常會拒絕回應回應中的 Set-Cookie 標頭，從而阻止 cookie 儲存在本機。

場景

考慮這種特定情況，前端應用程式需要設定刷新令牌以進行驗證。後端 API 正在按預期發送 Set-Cookie 標頭，但前端無法接收並保存它。

Axios 請求設定

程式碼用於從前端發送請求的提供包括 headers 物件中的 withCredentials 屬性。這不是該酒店的正確位置。 withCredentials 應該設定為 axios 實例本身的屬性，而不是標頭。

解決方案

透過將withCredentials 移動為屬性axios 實例的，而不是標頭，瀏覽器將正確遵守跨域回應中的Set-Cookie 標頭並儲存本地cookie。這允許前端應用程式隨後在後續請求中將 cookie 發送到 API 以進行身份驗證。

以上是為什麼我無法從跨來源 API 回應設定 Cookie？的詳細內容。更多資訊請關注PHP中文網其他相關文章！