EXTJS 使用Ajax跨域上传文件

小灰灰 2022-06-08 06:37 618阅读 0赞

问题描述：现有一台ast服务器需要本地客户上传铃声，作为等待铃声使用；ast服务与本地tomcat服务不在一个服务器上面

上传文件的组件:

{
    	xtype: 'filefield',
    	id: 'id_filefield',
    	name: 'myfile',
    	width: 250,
    	labelAlign: 'right',
    	fieldLabel: '等待铃声',
    	buttonText: '上传附件',
    	anchor: '100%'
    },
    事件：

{
                        xtype: 'button',
                        text: '   保   存   ',
                        itemId: 'updateBtn',
                        handler: function (btn) {
                            var form = this.up('panel').down('form');
                            var fileEl = Ext.getCmp('id_filefield').fileInputEl.dom;
                            var fd = new FormData();
                            fd.append('myfile', fileEl.files[0]);
                            Ext.Ajax.request({
                                url: 'http://119.29.188.243/web/operation_upfile.php',//这里是填写需要跨域访问的URL
                                cors: true,
                                useDefaultXhrHeader: false,
                                method: 'post',
                                rawData: fd,
                                async: false,
                                headers: {
                                    "Origin:": 'http://119.29.188.243',//这里是填写需要跨域访问的URL Origin字段用来说明，本次请求来自哪个源
                                    "Access-Control-Allow-Origin": 'http://ast.xxx.tm',//这里是填写需要跨域访问的URL
                                    "Access-Control-Allow-Credentials": true,
                                    "Content-Type": 'multipart/form-data'  //文件上传的格式， 
                                },
                                success: function (res, opts) {
                                    var text = res.responseText;
                                    var status = text.substring(0, text.indexOf("|"));
                                    var msg = text.substring(text.lastIndexOf("|") + 1);
                                    if (status.indexOf("1") != -1) {
                                        var fileName = text.substring(text.indexOf("|") + 1, text.lastIndexOf("|"));
                                        form.down('#attachments').setValue(fileName);
                                        //Ext.getCmp('id_filefield').hide();
                                        //form.down('#attachments').show();
                                    }
                                    Ext.example.msg('提示', msg);
                                },
                                failure: function (res, opts) {
                                    var text = res.responseText;
                                    var msg = text.substring(text.lastIndexOf("|") + 1);
                                    Ext.example.msg('提示', msg);
                                    flag = true;
                                }
                            });
                            var gatewayList = [];
                            var sipInfoList = [];
                            var gatewayFieldSet = form.down('#gatewayGroups');
                            var sipInfoFieldSet = form.down('#sipInfoGroups');
                            for (var i = 0; i < gatewayFieldSet.items.length; i++) {
                                var con = gatewayFieldSet.items.getAt(i);
                                var values = {
                                    id: con.down('#gatewayId').getValue(),
                                    cellnumber: con.down('#cellnumber').getValue() + ""
                                };
                                gatewayList.push(Ext.JSON.encode(values));
                            }
                            for (var i = 0; i < sipInfoFieldSet.items.length; i++) {
                                var con = sipInfoFieldSet.items.getAt(i);
                                var values = {
                                    id: con.down('#sipInfoId').getValue()
                                };
                                sipInfoList.push(Ext.JSON.encode(values));
                            }
                            form.getForm().submit({
                                url: 'sipGroupinsert',
                                method: 'post',
                                async: false,
                                params: {
                                    'gatewayListJson': gatewayList,
                                    'sipInfoListJson': sipInfoList
                                },
                                success: function (form, action) {
                                    if (action.result.success) {
                                        SIPGroupStore.reload();
                                    }
                                    if (action.result.msg) {
                                        Ext.example.msg('提示', action.result.msg);
                                    }
                                }
                            });
                        }
                    },error:
    XMLHttpRequest cannot load http://***/web/operation_upfile.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.runoob.com' is therefore not allowed access.
    在访问的服务端，也就是ast服务器中，修改访问的php代码，添加
    header('Access-Control-Allow-Origin:*');//允许所有域名访问
    或者
    header('Access-Control-Allow-Origin:http://client.runoob.com');//允许单个域名访问

其它服务器后台语言类似  
  
  
如果时java后台的话添加：  
getResponse().setHeader("Access-Control-Allow-Origin", "\*");//允许跨域访问