nodejs.ForbiddenError: invalid csrf token,egg中post失败解决方案

【vue2】axios请求与axios拦截器的使用详解 在vue中使用axios与axios拦截器的方法(全家桶之一) 阅读详情

问题:

前台使用axios发送Post请求,后端使用egg框架接受请求,报错nodejs.ForbiddenError: invalid csrf token。

原因:

egg 框架内置了安全系统,默认开启防止 XSS 攻击 和 CSRF 攻击,每次请求得时候请求头必须携带csrfToken字段。

解决方案:

一:关闭安全策略

在 config.default.js 文件中加入以下代码:

config.security: {
   csrf = {
     enable: false,
   }
}

但是显然这种是及其不提倡的。

二、请求头中携带csrfToken字段

server端:

// config.default.js 

config.security= {
   csrf : {
     headerName: 'x-csrf-token',// 自定义请求头
   }
}

客户端:

const getCookie = (val) => {//获取x-csrf-token字段
  var arr,reg=new RegExp("(^| )"+val+"=([^;]*)(;|$)");
  if(arr=document.cookie.match(reg))
  return unescape(arr[2]);
  else
  return null;
}

// NProgress 配置
NProgress.configure({
  showSpinner: false
});

//http请求拦截
httpNet.interceptors.request.use(function(config) {
  console.log(document.cookie);
  //发送请求之前
  config.headers['Content-Type'] = "application/json";
  config.headers['x-csrf-token'] = getCookie('csrfToken');//请求头设置x-csrf-token字段
  //开启 progress bar
  NProgress.start();

  return config;
},function(err) {
  //请求错误处理
  return Promise.reject(err);
})
Vue.js 中发起 HTTP 请求:探索各种方法及其使用技巧 在 Vue.js 项目中,发起 HTTP 请求是获取和处理数据的关键。通过本文的介绍,您应该已经了解了 Vue.js 中常见的发起 HTTP 请求的方式,包括基本使用、设置 Token 以及相关技巧。在实际应用中,根据您的需求选择合适的发起 HTTP 请求的方式,并正确使用它,可以确保您的数据获取任务能够高效地完成。 阅读详情

相关推荐

驱动钛丝(SMA)的应用(5)汽车腰托气阀常见问题及解决方案

财哥在前段时间发布的《驱动钛丝(SMA)的应用(1)汽车腰托支撑按摩气阀模块》一文,引发了很多企业的拜访和交流。 目前很多厂家已经启动或正在进行相关研发,同时也遇到了诸如:钛丝选型、驱动位移、响应设计、温度控制、力量设计、点动滞后、铆接工艺、量化生产等问题。

weixin_39168671的博客 1241

egg.js框架post请求出现invalid csrf token安全验证的报错,已解决

不得不说阿里的egg框架做的还是相当不错的,自带安全验证。 问题: get请求正常,post请求后台就会报这样的错误。 "nodejs.ForbiddenError: invalid csrf token" 对此问题官方有说明 点击跳转egg官方安全说明 这里不做过多解释 方法一:在confit.default.js新增以下代码,表示关闭安全验证(不推荐) config.security = { csrf: { enable: false, }, }; 方法二: 在前端

qq_31676725的博客 5401

TwinCAT 3 实战指南:从系统配置到高级运动控制

本文详细介绍了TwinCAT 3工业自动化控制平台的实战应用,从系统配置、PLC编程到EtherCAT总线配置和高级运动控制。通过倍福(Beckhoff)的TwinCAT 3平台,工程师可以高效实现复杂的工业自动化任务,包括运动控制、PLC编程等。文章还提供了常见问题排查和性能优化技巧,帮助用户提升系统稳定性和实时性。

weixin_30831529的博客 304

jquery ajax post()

jquery ajax post() 应用:使用post发送异步请求,从后端获取数据 ********************* 语法:post(url,[data],[callback]) url:请求获取数据地址 data:可选,传递给后端的数据 callback:可选,请求成功后调用,请求失败不会调用,函数参数: response:请求结果 status:请求结果状态,如success xmlhttpRequest:http请求对象 type:请...

weixin_43931625的博客 548

【CQUT】从零开始龙芯杯-开始前的准备

不同级别的Cpu对于vivado综合的时间有较大影响,其中Cpu的单核、多核性能以及cache性能影响权重较高。因此,为了保证学习进度和效率,我们建议在Cpu不低于I5 12400的环境下进行学习。Vivado2023.2安装包约100GB,为了保证成功安装建议留出300GB硬盘空间。龙芯杯的许多资料被托管在gitee,你需要git指令将资料克隆到本地。指定用书:CPU设计实战 Loongarch版 作者:汪文祥、邢金璋。Cpu性能对比网站:https://www.cpu114.com/

weixin_73689971的博客 908

下水管道损坏检测数据集总结

下水管道损坏检测数据集包含 6708 张图像,为下水管道损坏情况的检测提供了丰富的数据基础。该数据集提供了 YOLO 和 VOC 两种常见的标注方式,方便不同需求的使用者进行模型训练和研究。

crz1336768325的博客 870

nodejs.ForbiddenError: invalid csrf token解决方案

【现象】 【解决方法】在 config.default.js 文件中加入以下代码: config.security = { csrf:{ enable: false, } }

一火的专栏 2281

Axios-Auth-Refresh 常见问题解决方案

Axios-Auth-Refresh 是一个开源库,用于通过 axios 拦截器实现自动刷新授权。该项目允许开发者在请求失败时轻松拦截原始请求,刷新授权,并继续执行原始请求,而无需用户察觉。它适用于处理授权令牌过期的情况,自动更新令牌并继续进行网络请求。项目主要使用 JavaScript 编程语言,依赖于 axios 库。 ## 新手常见问题及解决步骤 ### 问题一:如何安装和使用 Axio...

gitblog_00605的博客 547

Qt C++ 信号发生器控制软件

waveformComboBox->addItems({"正弦波", "方波", "三角波", "锯齿波", "脉冲波"});frequencyLabel = new QLabel("频率 (Hz):");amplitudeLabel = new QLabel("幅值 (V):");offsetLabel = new QLabel("直流偏移 (V):");} else if (currentWaveform == "三角波") {} else if (currentWaveform == "方波") {

寒寒豆豆软件公司的博客 125

Isaac Lab & GR00T N1 入门教程(七)人形机器人推理与技能学习策略基准测试

本文介绍了IsaacLab设计的工业机器人操作评估系统,包含两项任务:螺母倾倒(成功率91%)和排气管分拣(成功率95%)。系统支持通过IsaacGR00TN1模型进行策略闭环评估,提供完整的开发环境配置指南(需Ubuntu22.04、CUDA12.8等环境),数据集下载方式(HuggingFace平台托管),以及模型微调流程。评估支持并行化测试(建议10-30个并行环境),并给出详细硬件配置建议(推荐RTX A6000 Ada显卡)。文档还包含常见问题解决方案,特别说明当前暂不支持Blackwell GP

2506_90492529的博客 1118

Vue的三种网络请求方式

在进行 Vue 的网络请求之前,我们先写一些假数据:users.json: 1. 写法1:XMLHttpRequest发送请求 使用 XMLHttpRequest 请求 users.json 中的数据: 使用 fetch 请求 users.json 中的数据: 概述:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和node.js中。能拦截请求和响应,自动转换JSON数据。axios也是vue作者推荐使用的网络请求库。优势:使用方法: 步骤1:使用初始化 node.js 配置文件步骤

月光晒了很凉快的博客 1万+

抖音移动端Web用户主页视频列表爬虫实战:逆向加密参数与高频采集方案

App端Hook/抓包:需要安卓逆向、Xposed或Frida,门槛高且容易被风控。官方开放API:限制极多,几乎不开放用户级视频列表。PC端Web:页面加载方式繁杂,且大量依赖懒加载与内部状态。移动端Web(:接口相对稳定,加密逻辑集中,且适合使用Requests/HTTPSession模拟,无需渲染引擎。本文聚焦于移动端Web下的用户主页视频列表爬取,采用Python 3.11 + httpx + PyExecJS + 正则/JSON解析的组合,破解X-Bogus签名和_signature。

2201_76125261的博客 851

application/x-www-form-urlencoded类型如何获取表单数据及ImmutableMultiDict如何使用

web开发中,时常会用到表单数据,利用表单自带的active字段设置url来触发一个表单请求,这个请求中会携带web页面中填写的表单数据,后台服务程序如何获取这些数据呢。通过fiddler抓包可以发现这种通过form发起的post请求,content-type类型时applicaiton/x-www-form-urlencoded,而不是常规的application/json格式,所以请求body...

zoulonglong的博客 8597

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

Gateway 解决body流重复获取,对application/json,multipart/form-data,x-www-form-urlencoded 参数加解密和 增删参数

【代码】Gateway 解决body流重复获取,对application/json,multipart/form-data,x-www-form-urlencoded 参数加解密和 增删参数。

weixin_45220510的博客 1866

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

Vue axios http Request 请求封装

Vue axios http Request 请求封装

草木疏博客 412

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

Axios-Auth-Refresh:自动刷新授权的开源库

Axios-Auth-Refresh 是一个基于 JavaScript 编写的开源项目,旨在帮助开发者通过 axios 的拦截器实现自动刷新授权的功能。 ## 1. 项目基础介绍 Axios-Auth-Refresh 是一个轻量级的库,它通过 axios 的拦截器机制,自动处理因授权过期导致的请求失败问题。当请求因为授权问题失败时,该项目可以自动执行刷新授权的逻辑,并在获得新的授权后重新发送请...

gitblog_00272的博客 1065

axios-auth-refresh 使用教程

`axios-auth-refresh` 是一个用于处理 Axios 请求中 token 刷新逻辑的开源项目。它可以帮助开发者在用户访问令牌(access token)过期时,自动刷新令牌并重试失败的请求,从而提供无缝的用户体验。该项目通过 Axios 拦截器实现这一功能,确保在不影响用户操作的情况下,后台自动完成令牌的刷新和请求的重试。 ## 项目快速启动 ### 安装 首先,你需要安装 ...

gitblog_01075的博客 1115

Axios.post 请求报错: 403 Forbidden missing csrf token 和 invalid csrf token

Axios.post。

guoqkmiss的博客 3502

Vue+element Upload利用http-request实现第三方地址图片上传

vue element upload图片上传http-request方法 后端oss图片上传接口简单实现

Ron_的博客 1万+

axios刷新token

推荐一个npm库: axios-auth-refresh

Cool的博客 757

Vue体验(前后端交互)

记录:263 体验XMLHttpRequest、jquery、Promise、fetch、axios的异步方式调用后端接口。 本例环境: 后端:node.js、express。 前端:Vue.js、HTML、CSS、jQuery、axios。 方式:分别使用XMLHttpRequest、jquery、Promise、fetch、axios的异步方式调用后端接口。 Ajax:Asynchronous Javascript And XML(异步JavaScript和XML)。在网页中利用 XMLHt

zhangbeizhen18的博客 2558

Vue中XMLHttpRequest的详细使用方法

Vue中使用XMLHttpRequest(XHR)来获取数据的方式与传统的HTML页面相同。在Vue中,可以将XHR封装在methods中的方法里,然后在Vue实例中调用该方法来实现数据的获取和渲染。以下是一个简单的例子:

代码小疯子 2607

推荐使用:axios-auth-refresh,自动刷新授权的利器!

在开发Web应用时,我们经常遇到的一个问题是处理用户的授权过期问题。为了解决这个问题,我们可以利用axios库中的拦截器功能进行处理。而`axios-auth-refresh`正是这样一个工具,它能够帮助你轻松地实现在请求失败后自动刷新授权,并继续执行原请求,无需任何用户交互。 ## 项目介绍 `axios-auth-refresh`是一个基于axios的小巧且强大的库,它的核心功能是通过设置...

gitblog_00043的博客 461

vue 请求拦截器配置

vue 请求拦截器

CCKing7的博客 4232

Egg post 失败 { message: 'invalid csrf token' } 解决方案

服务端无法接受 post 请求,并且前台报错 403 ,服务端自动返回信息:message: 'invalid csrf token' 很多人的解决方案是直接在 config.default.js 文件中加入以下代码: config.security: { csrf: { enable: false, } } 以上方法确实可以解决此方案,但是不推荐,egg 框架内置了安全系...

甘宇辉的博客 2万+
上一篇: react在不暴漏配置文件的情况下配置less
下一篇: react-redux教程
TE杨
博客等级 码龄7年 56粉丝 124原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值