ExtJs使用ajax跨域上传文件

前端之家收集整理的这篇文章主要介绍了ExtJs使用ajax跨域上传文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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,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',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',headers:{
        'Content-Type':'multipart/form-data'
    },opts) {
        alert('failure');
    }
});
那最后执行请求时,http头部的Content-Type将不包含boundary信息,服务器仍然无法正确解析数据:
Accept:*/*
Accept-Encoding:gzip,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',headers:{
        'Content-Type':'multipart/form-data; boundary=----fortestboundaryAaSsCdes'
    },opts) {
        alert('failure');
    }
});

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

Accept:*/*
Accept-Encoding:gzip,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',headers:{
        'Content-Type':null
    },opts) {
        alert('failure');
    }
});
测试运行正常,服务器也可以正确获取文件信息,问题得到解决 原文链接:https://www.f2er.com/ajax/160984.html

猜你在找的Ajax相关文章