关于 Angular 跨域请求携带 Cookie 的问题
在前端开发调试接口的时候都会遇到跨域请求的问题。传统的方式是使用 Nginx 反向代理解决跨域。比如所有接口都在 a.com
的域下,通过 Nginx 将所有请求代理到 a.com
的域下即可。
使用框架及 Webpack 进行开发时,也可以通过插件实现反向代理。比如使用 Angular 的时候可以通过 proxy.config.json
进行跨域设置。
但是如果开发的测试环境需要登录认证,则请求时需要携带 Cookie 信息。通过 Fetch 发送请求时,可以设置 credentials: 'include'
。而在 Angular 中,则是设置 withCredentials: true
。但是仍然存在跨域的问题。比如本地服务器为 localhost:XXXX
,而登录的 Cookie 信息在 a.com
的域下。所以还是无法解决跨域问题。不知道是不是自己没有找到更科学的方法。
为了解决这个问题,最后采用了一个相对保守的方法,可以使用 Chrome 插件 modheader
将 Cookie 手动添加到请求头中。虽然问题解决了,但切换页面时,还要反复设置插件开关,因为每个页面的 Cookie 是不一样的。暂时没有找到更好的解决办法。
感谢您的阅读,如果您对我的文章感兴趣,可以关注我的博客,我是叙帝利,下篇文章再见!
开发低代码平台的必备拖拽库 https://github.com/ng-dnd/ng-dnd
低代码平台必备轻量级 GUI 库 https://github.com/acrodata/gui
适用于 Angular 的 CodeMirror 6 组件 https://github.com/acrodata/code-editor
基于 Angular Material 的中后台管理框架 https://github.com/ng-matero/ng-matero
Angular Material Extensions 扩展组件库 https://github.com/ng-matero/extensions
Unslider 轮播图插件纯 JS 实现 https://github.com/nzbin/unsliderjs
仿 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