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. 阿里云centos7安装图形界面gnome

    这应该是很无聊很蛇精的操作吧. 首先命令行远程登陆阿里云,然后root身份更新系统,安装gnome这些操作(菜如我以前都没有操作过),参照网上虚拟机的教程. # yum update -y # yum ...

  2. 没有可用软件包 iostat。

    说明: iostat 主要用于监控系统设备的IO负载情况,根据这个可以看出当前系统的写入量和读取量,CPU负载和磁盘负载. iostat 命令的输出结果包含了很多信息,以下是一些常见的统计指标的解释: ...

  3. 基于ipset的dns代理

    ###基于源IP的dns白名单 sleep 60s/etc/init.d/firewall restart ###创建ipset集合 命名为src_dns_whitelist#清空原有命名为src_d ...

  4. 100多个常用 API 接口整理大全

    聚合数据提供30大类,160种以上基础数据API服务,国内最大的基础数据API服务,下面就罗列一些免费的各类API接口. 手机号码归属地API接口: https://www.juhe.cn/docs/ ...

  5. 操作系统 Concurrency 并发

    1. 线程和进程的区别 名称 执行点 地址空间 状态保存位置 进程 process 一个进程有多个线程,多个执行点 一个进程一个地址空间 Process Control Block 进程控制块 线程 ...

  6. yum无法安装nginx

    yum无法安装nginx,检查yum配置文件  

  7. Finance财务软件(如何运行该软件)

    下载软件 首先,去gitHub下载该项目的release,尽量下载最新版本:https://github.com/edwardorchis/finance/releases.国内也可以在码云下载htt ...

  8. redis info 对应参数详解

    https://blog.csdn.net/qq_27342265/article/details/123094422 info命令的使用方法有以下三种: info:部分Redis系统状态统计信息.i ...

  9. Lecture 2. Fundamental Concepts and ISA - Carnegie Mellon - Computer Architecture 2015 - Onur Mutlu

    并不只有冯诺依曼模型,按照控制流顺序执行指令 还有 data flow 模型,按照数据流顺序执行指令 冯诺依曼模型和数据流模型的编程语言的一个对比 Control-driven 编程模型和 data- ...

  10. vue页面多表单验证保存

    页面中有多个表单需要验证,可以使用以下方法: export default { data: { return { addOrEditVo: { name: '', description: '', a ...