Extjs fileuplaod - 跨源框架

Question

我在Extjs应用程序中有一个fileupload字段.我试图通过以下代码将文件加载到服务器的位置:

var form = Ext.getCmp('ProcImpNewSugFileForm').getForm();
var fileNameStr = Ext.getCmp('ProcImpNewSugFileUpload').getValue().split("\\");
if(fileNameStr){
var filename = fileNameStr[fileNameStr.length-1];
if(form.isValid()){
    form.submit({
        url: '/PISRFileUploader.php',            
        waitMsg: 'Uploading your file...',                
        success: function (formPanel, action, result) {
            Ext.Msg.alert('Msg',"Success: "+action.response.responseText);
        },
        failure: function (formPanel, action, result) {
            Ext.Msg.alert('Msg',"Failure: "+action.response.responseText);
        }
    });
   }
}

但是当我尝试上传任何文件时.该文件已加载到服务器,但响应如下:

    Failure: {success:false,message:"Blocked a frame with origin 'http://localhost' from accessing a cross-origin frame."}

提前致谢!

Answer 1

这是 Uberdude 在 Sencha 论坛中发现的一个 Ext js 错误。

问题描述：

当您使用包含要上传的文件输入的表单发出 Ext.Ajax.request 时，或者手动将 isUpload 选项设置为 true，而不是执行正确的 Ajax 请求时，Ext 会以标准 HTML 方式将表单提交到动态生成的隐藏文件。然后从 iframe 中读取 json 响应正文以创建伪造的 Ajax 响应。如果发出上传 Ajax 请求的页面更改了其 document.domain 属性，就会出现问题，例如 home.example.com 的页面包含来自 static.example.com 的资源，它希望使用 javascript 操作该资源而不违反浏览器的同源-policy，因此两者都将其 document.domain 设置为“example.com”。如果 home.example.com 然后向 home.example.com 服务器上的 URL 发出上传 Ajax 请求，则写入响应的 iframe 的 document.domain 将为“home.example.com”。因此，当 home.example.com 页面上的 Ajax.request 中的 ExtJS 代码尝试从 iframe 中提取文档正文时，它将被同源策略阻止，并且传递给回调函数的响应将错误地为空响应文本。

解决方法： 1. 在发出上传请求时将 document.domain 传递到服务器。2. 在服务器响应中，在响应文本/html 中添加 document.domain。

response.setHeader('Content-Type', 'text/html'); response.write('document.domain = "' + params.__domain + '";'); response.write(JSON.stringify({msg: '欢迎' + params.name})); 响应.end('');

细节 ：

请参考： http://www.sencha.com/forum/showthread.php ?136092-Response-lost-from-upload-Ajax-request-to-iframe-if-document.domain-changed