博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
nodejs下ueditor文件上传时csurf与contentType冲突问题
阅读量:7197 次
发布时间:2019-06-29

本文共 1628 字,大约阅读时间需要 5 分钟。

表单提交时 form submit 直接就可以提交了,但是了防止跨站攻击,都可以加入CSRF来防御。

node下的配置

var csrf = require('csurf');app.use(csrf());app.use(function(req, res, next){    let _csrf = req.csrfToken();    res.locals.csrf = _csrf;    res.cookie('XSRF-TOKEN', _csrf);    return next();});
页面

这么写当然没问题,但是当上传文件就不行了。

需要设置表单的enctype属性, 默认enctype 是对所有字符进行编码了的,同时csrf值就不能放到input 进行提交,从csrf源码来看我们传输csrf值可以放在以下几个地方

ajax异步提交,也是如此,但文件时也 new FormData 提交的,csrf 放在FormData 里也不行。最好的就是放在请求头里

xhr.setRequestHeader('csrf-token', _csrf);
在ueditor里就很容易做了,
ueditor里 是有ajax 方法提交的,但是没有支持file的,使用ue的方法默认就对表单信息进行了编码

可以将此方法修改一下就行了

addEvent(imguploadinput, 'change', function() {	     // var localImage = document.getElementById('localimage');	     // 	localImage.submit();            var ajax = UE.ajax;	    // 图片            var file = document.getElementById('imguploadinput').files[0];	    var form = new FormData();	    form.append('file', file);            ajax.request('/ueditor/ue?action=uploadimage', {                method: 'POST',                timeout: 10000,                async: true,		data: form,		_csrf: csrf.value,                onsuccess: function ( xhr ) {                    console.log( xhr.responseText );                },                //请求失败或者超时后的回调。                onerror: function ( xhr ) {                    alert( 'Ajax请求失败' );                }            });        });
ueditor 可以修改如下

成功提交后 返回如下

否则 没有设置header 时 

如果设置了

 xhr.setRequestHeader("Content-Type","multipart/form-data"); 也是不行的

写死后就出现找不到Boundary(用户分割不同的字段)的错误的错误

注意 使用jquery 的ajax 提交时 ,contentType 需要设置为false

contentType:false

有需要的交流的可以加个好友

你可能感兴趣的文章
centos 配置 nginx + fcgiwrap + git
查看>>
Eclipse下Maven打包非法字符问题
查看>>
选区M(选中、增加选区、减去选区、相交)
查看>>
关于failed mergeDebugeResources的一些主要错误(不定时更新)
查看>>
FreeMarker标签
查看>>
AngularJS 中的 Promise 和 设计模式
查看>>
《从面试题来看源码》,单参数,多参数,如何正确使用@Param
查看>>
《JavaScript设计模式》学习日志
查看>>
MySql 建表、添加字段、修改字段、添加索引SQL语句写法
查看>>
Core Bluetooth框架之三:最佳实践
查看>>
我是如何进行Spring MVC文档翻译项目的环境搭建、项目管理及自动化构建工作的...
查看>>
Gson序列化时@SerializedName的使用
查看>>
QuickXDev增强功能:Create New Project
查看>>
windows上pip install 报编码错误
查看>>
boost asio学习笔记 [1] - 同步通讯
查看>>
什么是BMC商业模式?
查看>>
Linux扫雷
查看>>
Android编程中关于Fragment的一切
查看>>
Java面试——从JVM角度比较equals和==的区别
查看>>
IO复用,AIO,BIO,NIO,同步,异步,阻塞和非阻塞 区别
查看>>