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. Nginx基础篇

    目录 一.nginx基础篇 1.Nginx开源版本安装 2.Nginx的基础配置 3.虚拟主机与域名解析 4.ServerName匹配规则 5.反向代理 6.动静分离 7.location后符号的匹配 ...

  2. SQL执行定时任务JOB,包教包会

    什么是JOB? 数据库中可以定时执行任务的功能组件,那就是JOB. JOB的作用 它可以按我们设置好的参数定时执行查询语句或存储过程,特别适合一些每天,每周,每月,每年这种需要循环执行任务的场景,当然 ...

  3. logstash输出到MySQL

    1.安装插件/bin/logstash-plugin install logstash-output-jdbc 2.下载jdbc  https://mvnrepository.com/artifact ...

  4. tfidf与bm25

    https://www.cnblogs.com/johnnyzen/p/11298273.html 前言 本文主要是对TF-IDF和BM25在公式推演.发展沿革方面的演述,全文思路.图片基本来源于此篇 ...

  5. UI设计圈年终福利,错过一次等一年!

    年底了,小摹发现各种大数据年终报告接踵而至.但真相是,某博不知道和你互动最多的是个机器人,某Q不知道听歌最久那天只是忘了关APP.大数据不懂你,但是摹客懂你! 设计萌新更希望大佬能在线帮忙改稿. 5年 ...

  6. Flink Concept Timely Stream Processing -Flink概念及时流处理

    目录 介绍 时间概念:事件时间和处理时间 事件时间和水印 并行流中的水印 延迟 窗口 翻译来源- Concept Timely Stream Processing 介绍 及时的流处理是有状态流处理的扩 ...

  7. ref、reactive、toRef、toRefs使用与区别

    reactive 传参:reactive(arg),arg只能是对象 arg为普通对象 返回响应式对象,不管层级多深,都能响应 使用:获取数据值的时候直接获取,不需要加.value 特点:解构.扩展运 ...

  8. ubuntu 16.04 Chrome安装

    打开终端 输入 命令1:sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/apt/sources.list ...

  9. zabbix 使用小技巧

    001.监控项指定时间执行 wd1-7h01m00 周一到周日,每天 01:00:00 执行一次 002.监控项某一段时间点每分钟执行一次 1-5,00:00-09:00 6-7,00:00-23:5 ...

  10. File类的基本用法

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...