ExtJs使用ajax跨域上传文件

最新推荐文章于 2021-08-06 16:54:32 发布

caostorm

最新推荐文章于 2021-08-06 16:54:32 发布

阅读量6.1k

点赞数 6

文章标签： extjs 跨域上传文件

本文链接：https://blog.csdn.net/caostorm/article/details/74392158

版权

Ext.define('test.view.uploadtest.main', {
    extend:'Ext.panel.Panel',
    xtype:'uploadtest',
    items: [{
        xtype:'form',
        title:'upload test',
        width:360,
        layout:'vbox',
        items: [{
            xtype:'filefield',
            width:'100%',
            name:'logfile',
            id:'logfile',
        }, {
            xtype:'button',
            width:45,
            text:'上传文件',
            listeners: {
                click:function (btn,e,opts) {
                    fileEl = Ext.getCmp('logfile').fileInputEl.dom;
                    var fd =new FormData();
                    fd.append('logfile',fileEl.files[0]);
                    Ext.Ajax.request({
                        url:'http://192.168.21.101/u.php',
                        cors:true,
                        useDefaultXhrHeader:false,
                        method:'post',
                        rawData:fd,
                        headers: {
                            "Content-Type":null   /* 最重要的部分，将Content-Type设置成null，ExtJs则会由内部的XMLHTTPRequest自动生成包含boundary的Content-Type，否则在使用rawData的情况下，ExtJs会将Content-Type设置成text/plain */
                        },
                        success:function (res,opts) {
                            alert('success');
                        },
                        failure:function (res,opts) {
                            alert('failure');
                        }
                    });
                }
            }
        }]
    }]
});

以上是可以跨域上传文件的代码，关键地方做了标注。
以下是太长不看版：
刚开始的时候，我使用form的submit来提交文件：

btn.up('form').getForm().submit({
    url:'http://192.168.21.101/u.php',
    cors: true,
    useDefaultXhrHeader:false,
    success:function(form,action){
        alert('success');
    },
    failure:function(form,action){
        alert('failure');
    }
});

发现每次执行都是failure，再查看failure事件中的action.response可以看到：

responseText:"{success:false,message:"Blocked a frame with origin "http://localhost:1841" from accessing a cross-origin frame."}"
responseXML:null
status:400
statusText:"Blocked a frame with origin "http://localhost:1841" from accessing a cross-origin frame."

由于跨域，即使上传文件的请求成功，也会由于浏览器的拦截导致失败。既然form的submit方法不支持跨域，那就改用ajax+formdata来请求，在ExtJs中formdata需要使用到rawData属性来发送：

fileEl = Ext.getCmp('logfile').fileInputEl.dom;
var fd =newFormData();
fd.append('logfile',fileEl.files[0]);
Ext.Ajax.request({
    url: 'http://192.168.21.101/u.php',
    cors: true,
    useDefaultXhrHeader: false,
    method: 'post',
    rawData: fd,
    success: function (res,opts) {
        alert('success');
    },
    failure: function (res,opts) {
        alert('failure');
    }
});

运行时，所有的请求都从success的事件中返回了，然而服务器并没有正确接收到文件，查看网络抓包发现了问题的所在，这个是请求的HTTP头部：

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4
Connection:keep-alive
Content-Length:621
Content-Type:text/plain <-------------------错误的Content-Type将导致服务器无法正确解析参数
Host:192.168.21.101
Origin:http://localhost:1841
Referer:http://localhost:1841/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

注意看Content-Type的地方，这个请求的Content-Type是text/plain，而传输文件的时候，数据是通过multipart/form-data的格式来传输

------WebKitFormBoundaryBKkxWkenCjSNoZr0
Content-Disposition: form-data; name="logfile"; filename="b.txt"
Content-Type: text/plain

------WebKitFormBoundaryBKkxWkenCjSNoZr0--

这就解释了为什么服务器无法正确处理数据，根据rfc1867协议中的规定，当使用表单上传文件的时候，需要使用multipart/form-data的格式进行编码，并且在http的头部中，设置Content-Type为multipart/form-data，并且使用负载数据中不会出现的字符串，作为boundary用于字段之间进行分割。正确的Content-Type应该是：

Content-Type:multipart/form-data; boundary=AaB03x

然而当我使用headers属性手动设置Content-Type的时候出现了一个无奈的问题：boundary不能手动设置。
我尝试了两种方法，
1.不手动加boundary

Ext.Ajax.request({
    url: 'http://192.168.21.101/u.php',
    cors: true,
    useDefaultXhrHeader: false,
    method: 'post',
    rawData: fd,
    headers:{
        'Content-Type':'multipart/form-data'
    },
    success: function (res,opts) {
        alert('success');
    },
    failure: function (res,opts) {
        alert('failure');
    }
});

那最后执行请求时,http头部的Content-Type将不包含boundary信息，服务器仍然无法正确解析数据：

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4
Connection:keep-alive
Content-Length:621
Content-Type:multipart/form-data   <------------------注意这行，不包含boundary信息
Host:192.168.21.101
Origin:http://localhost:1841
Referer:http://localhost:1841/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

2.手动加上boundary:

Ext.Ajax.request({
    url: 'http://192.168.21.101/u.php',
    cors: true,
    useDefaultXhrHeader: false,
    method: 'post',
    rawData: fd,
    headers:{
        'Content-Type':'multipart/form-data; boundary=----fortestboundaryAaSsCdes'
    },
    success: function (res,opts) {
        alert('success');
    },
    failure: function (res,opts) {
        alert('failure');
    }
});

发现请求的Http头部中的boundary和内容中的boundary不一致：

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4
Connection:keep-alive
Content-Length:621
Content-Type:multipart/form-data; boundary=----fortestboundaryAaSsCdes   <------Content-Type中已经有了我们手动设置的boundary
Host:192.168.21.101
Origin:http://localhost:1841
Referer:http://localhost:1841/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

然而内容中的boundary仍然是浏览器自己生成的：

------WebKitFormBoundarycWsyuhDfyRmYp8dZ
Content-Disposition: form-data; name="logfile"; filename="b.txt"
Content-Type: text/plain


------WebKitFormBoundarycWsyuhDfyRmYp8dZ--

这个意味着boundary必须由浏览器生成，那么我们就不能手动设置Content-Type，但是不设置Content-Type，ExtJs会自己设置Content-Type为text/plain，问题似乎陷入了死胡同。
我相信问题必定有解决的方法，最糟糕的情况不过于需要修改ExtJs的源码，然而当我仔细阅读这部分的源码的时候，发现ExtJs还是留了一道后门给我们，解决这个问题的关键就在Ext.data.request.Ajax这个类的setupHeaders中：

setupHeaders:function(xhr,options,data,params) {
    var me = this,
    // 当Ajax.request中的参数对象有headers这个参数的时候，headers使用传入的参数
    // 注意type在这个地方是'Content-Type' 
    headers = Ext.apply({}, options.headers || {}, me.defaultHeaders), type = 'Content-Type',

... 

    // 接下来ExtJs检查了headers中间是否设置了'Content-Type'这个属性，如果没有设置 
    // 并且使用了rawData、xmlData和jsonData中的一个，则将设置默认的Content-Type 
    if (!headers.hasOwnProperty(type) && (data ||params)) { 
        if (data) { 
            if (options.rawData) { 
                // 这个地方可以看到，当使用rawData时，Content-Type将被默认设置成'text/plain' 
                // 这个和我们之前测试代码的运行结果是一致的 
                contentType ='text/plain'; 
            } 
            else { 
                if (xmlData &&Ext.isDefined(xmlData)) { 
                    contentType ='text/xml'; 
                } 
                else if (jsonData && Ext.isDefined(jsonData)) { 
                    contentType ='application/json'; 
                } 
            } 
        } 
        headers[type] =contentType; 
    }

... 

    // 最关键的代码出现在这个地方，如果headers['Content-Type']没有定义，或者设置为null 
    // 那么这个属性将会从headers里删去 
    if (headers[type] ===undefined ||headers[type] ===null) { 
        delete headers[type]; 
    } 

    try { 
        // 删去之后，ExtJs将不会再设置Content-Type，而是让XMLHTTPRequest自己决定Content-Type的内容 
        // 这个正是我们所需要的 
        for (key in headers) { 
            if (headers.hasOwnProperty(key)) { 
                header = headers[key]; xhr.setRequestHeader(key,header); 
            } 
        } 
    }

...

    return headers;
},

这份代码中我隐藏了部分不太相关的代码，分析了相关代码，我们发现，只需要在headers属性中设置'Content-Type'为null，那么ExtJs在发送rawData时，也不会自己去设置Content-Type为'text/plain'。
既然这样，我把上面通过ExtJs的ajax发送数据的代码稍作修改：

Ext.Ajax.request({
    url: 'http://192.168.21.101/u.php',
    cors: true,
    useDefaultXhrHeader: false,
    method: 'post',
    rawData: fd,
    headers:{
        'Content-Type':null
    },
    success: function (res,opts) {
        alert('success');
    },
    failure: function (res,opts) {
        alert('failure');
    }
});

测试运行正常，服务器也可以正确获取文件信息，问题得到解决。