服务端无法接受 post
请求,并且前台报错 403
,服务端自动返回信息:message: 'invalid csrf token'
很多人的解决方案是直接在 config.default.js
文件中加入以下代码:
config.security: {
csrf = {
enable: false,
}
}
以上方法确实可以解决此方案,但是不推荐,egg
框架内置了安全系统,默认开启防止 XSS 攻击
和 CSRF 攻击
,所以以上设置只是将内置的安全系统关闭了而已,所以并不推荐这样做。
egg
的默认安全系统,前后端不分离的情况下需要注意,每次在前端发送 post
请求的时候必须读取一个 cookie
字段 : csrfToken
放在 header 请求头里面,每次请求的时候 egg 会帮我们验证一次,所以我们需要重新配置一下:
server端:
// config.default.js
config.security= {
csrf : {
headerName: 'x-csrf-token',// 自定义请求头
}
}
客户端请求:
// tool.js
// 封装获取 cookie 的方法
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
// index.js
axios({
method: 'post',
url: '/user/12345',
headers:{
'x-csrf-token': getCookie("csrfToken"), // 前后端不分离的情况加每次打开客户端,egg会直接在客户端的 Cookie 中写入密钥 ,密钥的 Key 就是 'scrfToken' 这个字段,所以直接获取就好了
},
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
接下来就不会再有类似这种报错的问题了。