關于 Angular 跨域請求攜帶 Cookie 的問題

在前端開發調試接口的時候都會遇到跨域請求的問題。傳統的方式是使用 Nginx 反向代了解決跨域。比如所有接口都在 <code>a.com</code> 的域下，通過 Nginx 将所有請求代理到 <code>a.com</code> 的域下即可。

使用架構及 Webpack 進行開發時，也可以通過插件實作反向代理。比如使用 Angular 的時候可以通過 <code>proxy.config.json</code> 進行跨域設定。

但是如果開發的測試環境需要登入認證，則請求時需要攜帶 Cookie 資訊。通過 Fetch 發送請求時，可以設定 <code>credentials: 'include'</code> 。而在 Angular 中，則是設定 <code>withCredentials: true</code> 。但是仍然存在跨域的問題。比如本地伺服器為 <code>localhost:XXXX</code>，而登入的 Cookie 資訊在 <code>a.com</code> 的域下。是以還是無法解決跨域問題。不知道是不是自己沒有找到更科學的方法。

為了解決這個問題，最後采用了一個相對保守的方法，可以使用 Chrome 插件 <code>modheader</code> 将 Cookie 手動添加到請求頭中。雖然問題解決了，但切換頁面時，還要反複設定插件開關，因為每個頁面的 Cookie 是不一樣的。暫時沒有找到更好的解決辦法。

感謝您的閱讀，如果您對我的文章感興趣，可以關注我的部落格，我是叙帝利，下篇文章再見！

開發低代碼平台的必備拖拽庫 https://github.com/ng-dnd/ng-dnd

基于 Angular Material 的中背景管理架構 https://github.com/ng-matero/ng-matero

Angular Material Extensions 擴充元件庫 https://github.com/ng-matero/extensions

仿 Windows 照片檢視器插件 https://github.com/nzbin/photoviewer

仿 Windows 照片檢視器插件 jQuery 版 https://github.com/nzbin/magnify

完美替代 jQuery 的子產品化 DOM 庫 https://github.com/nzbin/domq

簡化類名的輕量級 CSS 架構 https://github.com/nzbin/snack

與任意 UI 架構搭配使用的通用輔助類 https://github.com/nzbin/snack-helper

單元素純 CSS 加載動畫 https://github.com/nzbin/three-dots

有趣的 jQuery 卡片抽獎插件 https://github.com/nzbin/CardShow

懸疑科幻電影推薦 https://github.com/nzbin/movie-gallery

鍛煉記憶力的小程式 https://github.com/nzbin/memory-stake