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. windows系统修复

    尝试进入安全模式,然后调整相关启动项或卸载有冲突的软件/驱动 尝试进入PE后使用chkdsk命令修复C分区 尝试进入系统后使用sfc /scannow命令检查修复系统

  2. RHEL8注册

    安装RHEL后,因为是商用系统,YUM软件仓库是不能使用的,需要注册后才可以使用.个人用户可以去红帽官网申请开发者账户. https://developers.redhat.com/ 有了开发者账户后 ...

  3. python之路3:文件操作和函数基础

    文件操作 字符编码解码 函数基础 内置函数 一.文件操作 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 打开文件的模式有: r,只读模式(默认). w,只写 ...

  4. C语言学习--指针数组

    #include<stdio.h> //指针数组, 数组里面的每一个元素都是指针 int main() { int a = 10; int b = 20; int c = 30; // i ...

  5. linux-添加磁盘-MBR分区-挂载

    [root@localhost ~]# lsblk 查看当前磁盘 [root@localhost ~]# fdisk /dev/sdb 磁盘分区 所有的硬件都在/dev下面存放 欢迎使用 fdisk ...

  6. 如何把接口返回文件流读取后写入Excel

    代码: res = res.content #接口返回的内容 with open(path,mode='wb') as file: #excel的路径 file.write(res)

  7. 在子组件中使用$parent获取不到父组件里的变量值?

    一直用的都是this.$parent来取父组件的值,现在发现,element-UI内的组件,也是一层父组件 例如 父组件内 子组件内   console.log 打印结果

  8. 查看Linux系统的一些信息

    1.查看物理cpu个数 grep 'physical id' /proc/cpuinfo | sort -u | wc -l cat /proc/cpuinfo | grep "physic ...

  9. .NET Core中的AOP

    1.AOP的应用场景 AOP全称Aspect Oriented Progarmming(面向切面编程),其实AOP对ASP.NET程序员来说一点都不神秘,你也许早就通过Filter来完成一些通用的功能 ...

  10. vue保持滚动条在底部

    mounted() { this.scrollToBottom(); }, updated: function () { this.scrollToBottom(); }, scrollToBotto ...