Extjs 文件上传 - 跨域框架 [英] Extjs fileupload - cross-origin frame

问题描述

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

var form = Ext.getCmp('ProcImpNewSugFileForm').getForm();var fileNameStr = Ext.getCmp('ProcImpNewSugFileUpload').getValue().split("\");如果(文件名Str){var filename = fileNameStr[fileNameStr.length-1];if(form.isValid()){表单.提交({url: '/PISRFileUploader.php',waitMsg: '正在上传您的文件...',成功:函数(formPanel，动作，结果){Ext.Msg.alert('Msg',"成功:"+action.response.responseText);},失败:函数(formPanel，动作，结果){Ext.Msg.alert('Msg',"失败:"+action.response.responseText);}});}}

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

 失败:{success:false,message:"阻止了一个来自 'http://localhost' 的框架访问跨源框架."}

提前致谢！

解决方案

这是 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 进行操作，因此都将它们的 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. 在您的服务器响应中，在您的响应 text/html 中添加 document.domain.

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

细节:

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

I have a fileupload field in my from in Extjs application. Where I am trying to load files to the server by following code:

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);
        }
    });
   }
}

But when I try to upload any file. The file is getting loaded to the server but the response is coming like this:

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

Thanks in Advance!

解决方案

This is a Ext js bug identified by Uberdude in the Sencha Forum.

Description of the problem :

When you make an Ext.Ajax.request with a form containing a file input to be uploaded, or manually set the isUpload option to true, rather than doing a proper Ajax request Ext submits the form in the standard HTML way to a dynamically generated hidden . The json response body is then read out of the iframe to create a faked-up Ajax response. A problem arises if the page making the upload Ajax request has changed its document.domain property, e.g. a page at home.example.com includes resources from static.example.com which it wishes to manipulate with javascript without violating the browser's same-origin-policy, so both set their document.domain to "example.com". If home.example.com then makes an upload Ajax request to a url on the home.example.com server, the iframe into which the response is written will have its document.domain as "home.example.com". Thus when the ExtJS code within Ajax.request on the home.example.com page tries to extract the document body from the iframe, it will be blocked by the same-origin-policy and the response passed to the callback functions will incorrectly have empty responseText.

Work Around : 1. Pass the document.domain to the server when making the upload request. 2. In your server response, add the document.domain in your response text/html.

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

Detail :

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

这篇关于Extjs 文件上传 - 跨域框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！