1、创建拦截器

import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs'; export class AddHeaderInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// Clone the request to add the new header
let xsrftoken = ''
document.cookie.split(';').forEach(it => {
if (it.split('=')[0]=='XSRF-TOKEN'||it.split('=')[0]==' XSRF-TOKEN') {
xsrftoken = it.split('=')[1]
}
})
const clonedRequest = req.clone({ headers: req.headers.set('X-XSRF-TOKEN', xsrftoken) }); // Pass the cloned request instead of the original request to the next handle
return next.handle(clonedRequest);
}
}

2、用HTTP_INTERCEPTORS提供的注册

import { HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: AddHeaderInterceptor,
multi: true,
}],
})
export class AppModule {}

参照:https://www.cnblogs.com/sugartang/p/14338731.html

angular请求头部加XSRF-TOKEN的更多相关文章

  1. ajax请求头加Token时发生的跨域(CORS)请求问题

    首先描述下问题:需求是在请求头中加入token,我在ajax请求数据时添加了请求头‘Authorization’字段,并添加了响应的token值,在请求数据的时候浏览器报错如下: Request he ...

  2. 使用apache的HttpClient进行http通讯,隐藏的HTTP请求头部字段是如何自动被添加的

    我们用apache的HttpClient这个库消费云端的Restful API时,一般都需要两次HTTP调用,第一次获得某种token,比如获取防止跨域请求伪造攻击Cross-site request ...

  3. .NET Core实战项目之CMS 第十四章 开发篇-防止跨站请求伪造(XSRF/CSRF)攻击处理

    通过 ASP.NET Core,开发者可轻松配置和管理其应用的安全性. ASP.NET Core 中包含管理身份验证.授权.数据保护.SSL 强制.应用机密.请求防伪保护及 CORS 管理等等安全方面 ...

  4. Angular 请求数据

    Angular 请求数据 get post 以及 jsonp 请求数据 引入 HttpModule .JsonpModule 普通的 HTTP 调用并不需要用到 JsonpModule,不过稍后我们就 ...

  5. Angular通过XHR加载模板而限制使用file://(解决方案)

    编写angular项目时,遇到此困难: angular.js:12011 XMLHttpRequest cannot load file:///E:/angular/imooc/chapter2/bo ...

  6. 跨站请求伪造 CSRF / XSRF<二:应用>

    防御的方法主要有两种<java示例> 1.检查Referer字段 HTTP头中有一个Referer字段,这个字段用以标明请求来源于哪个地址.在处理敏感数据请求时,通常来说,Referer字 ...

  7. BaseHttpListActivity,几行代码搞定Android Http列表请求、加载和缓存

    Android开发中,向服务器请求一个列表并显示是非常常见的需求,但实现起来比较麻烦,代码繁杂. 随着应用的更新迭代,这种需求越来越多,我渐渐发现了实现这种需求的代码的共同点. 于是我将Activit ...

  8. http 请求头部解析

    作者:知乎用户链接:https://www.zhihu.com/question/42696895/answer/109035792来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  9. 中断 http请求 正在加载 取消http请求

    中断 http请求  正在加载 取消http请求

  10. 使用zuul实现验证自定义请求头中的token

    路由:她会把外部所有对请求转发到具体的微服务实例上,是实现外部访问同一接口的基础 过滤: 就是权限的检查, 判断当前的请求是否有权限区访问那些服务集群 搭建后台网关: 导入eureka - clien ...

随机推荐

  1. 【记录】Linux Mint Cinnamon Desktop Enviroment使用记录

    之前使用的系统是Kali Linux,并不是看上了一堆工具,工具的话上虚拟机不好吗,会折腾的docker更好阿,主要是 1. 用习惯了gnome的桌面环境 2. 开箱即用 很多配置他都已经做好了 我都 ...

  2. mysql开启root用户远程管理权限

    来源:https://blog.csdn.net/qq_29670375/article/details/120590041 1.使用"mysql -uroot -proot"命令 ...

  3. CAD中相交线怎样打断?CAD打断相交线步骤

    在CAD设计过程中,如果想要打断图纸中相交线该如何操作呢?大家第一个想到的是不是CAD打断命令?没错,CAD打断命令是可以实现的,但是过于麻烦,今天小编来给大家分享一个更简单的方法,那就是浩辰CAD软 ...

  4. SQLite检查表是否存在

    通过检索SQLite的内置表sqlite_master,查询是否有需要检索的表信息,即可得出该表是否存在. SELECT * FROM sqlite_master WHERE type='table' ...

  5. 数字图像处理之直方图处理——a cute dog huang

    关于图像处理的知识,确实很棒,在此感谢:https://blog.csdn.net/mary_0830/article/details/89003488 直方图处理概念灰度级范围为[0,L-1]的数字 ...

  6. linux 网络操作 route iptables ufw

    linux 网络操作 route iptables ufw sudo ufw status sudo ufw allow ssh sudo ufw allow http sudo ufw deny h ...

  7. vue-awesome-swiper使用中的一些问题

    项目中使用了vue-awesome-swiper,发现autoplay不能用.网上找了半天,说是版本问题.最后在main.js中添加以下代码解决. import VueAwesomeSwiper fr ...

  8. BeanUtils.copyProperties null覆盖问题

    直接用一下工具类 public class CopyUtils { public static String[] getNullPropertyNames (Object source) { fina ...

  9. IDEA通过Spring Initalizr新建SSM (2)

    之前的方式是通过官网初始化demo(URL:https://start.spring.io/)现在记录一下通过IDEA自带的初始化器新建SSM框架 1.打开IDEA,点击新建,出现如下图菜单,点击Sp ...

  10. 用Docker-Compose一分钟搭建Wordpress博客系统

    环境: CentOS 7.5 Docker 20.10.2 Docker-Compose 1.25.5 [root@localhost ~]# cat /etc/redhat-release Cent ...