一. 用户签到的难点

为什么这么简单的东西也要单独拿出来讲一讲？主要还是跨域的问题。

如果不考虑跨域的话，只要给click绑定以下事件就行了：

  onSignin() {this.memberSerice.signIn().subscribe(res => console.log(res),error => console.log(error));}

但是大家都知道，http是无状态的，如果人家没给你一个标识符，人家就无法认出你。这就有了cookie，他会主动向你发一个cookie，然后你携带这这个cookie去访问服务器，诶，他就能认出你来了。

然而我们本次项目开启的服务是http://localhost:3000, 而angular项目跑在http://localhost:4200。这就会引发跨域问题，默认情况下你是无法携带cookie访问我们的服务的。

当然，我们也能在不修改以上代码的情况下，通过添加http-interceptor来发送跨域的cookie。

二. 从同源策略讲起

什么才能叫作同源？一定要同时满足以下三点：

策略相同：不能是https和http
域名相同：不能是baidu.com和google.com
端口相同：不能是80到8080

如果有一个条件不满足，那就发生了跨域现象。

三. CORS

CORS就是跨域资源共享。按理来讲，如果要跨域访问资源，就会有很多限制，比如无法访问localStorage, 无法收到ajax的response等等。但是只要正确设置了CORS头，就能跨域访问资源了。

以最简单的GET请求为例（之所以称它为简单，是因为他无法触发浏览器的preflight请求），如果服务器的response设置了Access-Control-Allow-Origin: *。那么客户端就能跨域访问资源了。

四. 浏览器的preflight请求

对于一些复杂的请求（比如有一些side effect的请求），会触发浏览器的preflight请求。

说得这么绕，到底是咋回事呢？简单点就是说，浏览器先发一个request帮你问问服务器能不能跨域，得到“能”的答复后就让你发送，否则就阻止你的发送。

什么才叫复杂的请求呢？请见：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

五. 携带跨域cookie访问服务器

cookie这个东西和localStoarge不一样，你还是能够设置CORS请求头来访问服务器的。这里我们可以通过设置withCredentials为true来允许跨域。

同时，服务端也要设置好各种响应头才能让我们的浏览器相应跨域行为：

// CORS & Preflight request
app.use((req, res, next) => {if(req.path !== '/' && !req.path.includes('.')){res.set({'Access-Control-Allow-Credentials': true,// 对于携带cookie的请求来说，origin是不能为*的'Access-Control-Allow-Origin': req.headers.origin || '*','Access-Control-Allow-Headers': 'X-Requested-With,Content-Type','Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS','Content-Type': 'application/json; charset=utf-8'})}req.method === 'OPTIONS' ? res.status(204).end() : next()
})

六. http-intercetor

在angular中我们可以通过http-interceptor来拦截我们的http请求，如果要给请求添加withCredential属性，可以这么做：

@Injectable()
export class CommonInterceptor implements HttpInterceptor {intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {// 允许跨域的cookiereturn next.handle(req.clone({withCredentials: true})).pipe(catchError(this.handleError));}
}

然后我们创建一个index.ts导出一下：

export const httpInterceptorProvides = [{ provide: HTTP_INTERCEPTORS, useClass: CommonInterceptor, multi: true }
];

就可以带着cookie访问服务器了。

【Angular实战/网易云】用户签到（interceptor使用）相关推荐

Java高级-云课堂后端项目实战网易云课堂
Java高级-云课堂后端项目实战网易云课堂课程概述 <Java高级开发工程师>课程包含六大专题,分别是高性能编程专题.中间件专题.容器化技术专题.分布式系统开发技术.后端项目实战及网易 ...
VUE实战--网易云音乐
VUE实战–网易云音乐知识点: 音乐的暂停播放. 歌词的动态匹配. 动态组件: 根据is 属性后面的组件名匹配 <component :is="组件的名字">< ...
网络爬虫终篇：向10万级网易云用户发送定向消息
本文目标: 上篇我们获得了评论用户ID及主页地址.本篇就可以基于这些数据进行一些数据分析和市场操作.理论上学会了本文的方法,你可以在任何一个网页发送广告信息,本文具有被坏人利用的可能性,因此设置了收费 ...
[python]抓取网易云用户的听歌排行
本文使用到的工具是Selenium.简单的多Selenium就是一个web自动化测试工具,提供IDE以及插件多种方式. 本文的目标是使用Selenium抓取网易云音乐用户的所有时间的听歌排行. 下面结 ...
爬虫实战-网易云音乐
经分析,网易云音乐分为以下三类:免费音乐.会员下载,付费收听. 前两类音乐包含了绝大多数音乐,付费收听仅仅是极少数. 本篇爬虫目的--> 实现需要会员下载的音乐能够免费下载核心:网易云提供了一 ...
【Python实战】爬取网易云音乐用户听歌排行，来制作一张Ta最爱歌手的词云图
前言大家好,我是Samaritan. 平时写代码的时候,作为云村用户的一员,我当然也是最爱开着网易云音乐(以下简称网易云). 大家都知道在网易云里你可以查看好友或是任意用户的听歌排行(假使Ta设置全 ...
网易云音乐app用户个人中心(对比QQ音乐）
打开网易云,寻找用户个人中心咋一看,顶部居中的三枚按钮没有个人中心,排除法,点来左上角类似设置的图标发现个人中心入口,一张晶莹剔透的背景墙上有头像,昵称,用户等级的信息,这个默认的背景墙上还有一个 ...
潜心专研Python模拟登陆专题，实现网易云音乐自动签到!这项目居然只值三百？
前言: 时隔三周没有和大家见过面了,最近在研究python模拟登陆专题,话不多说,让我们愉快地开始实现模拟登陆实现网易云自动签到开发工具 **Python****版本:**3.6.4 相关模块: D ...
网易云音乐爬虫实战——肖战《红梅赞》下评论数据挖掘与分析
网易云音乐爬虫实战--肖战<红梅赞>下评论数据挖掘与分析前言本章工具数据挖掘部分 1.获取歌曲评论 2.根据ID获取用户信息数据分析部分 1.评论数时间分布 2.评论内容词云 3. ...

【Angular实战/网易云】用户签到（interceptor使用）