通过表单提交进行跨域的extjs文件上传。

问题描述 投票:1回答:3

我想把文件上传到跨域服务器上,从 使用 form.submit() 方法。当我调用 form.submit()在我的restful网络服务中,请求正在进行,文件正在被成功上传。但是在浏览器上的响应被阻止了,并给出了以下信息: "Blocked a frame with origi...host:1841" from access to the cross-origin frame: Blocked a frame with origi...host:1841" from accessing a cross-origin frame.

从以前的帖子和表单提交代码中,我找到了以下几点 doSubmit() 在发送Ajax请求时,没有 cors:true 语句,导致跨域响应被阻止。

我想发送普通的Ajax请求,但不知道如何通过ajax请求读取文件数据并发送给服务器。

有没有什么办法在 将文件数据以 form.doSubmit()吗?谁能帮我解决这个问题?

谢谢了。

解决方案是 document.domain = document.domain的作用是什么?http:/codeengine.orgextjs-fileuplaod-cross-origin-frame。

javascript extjs
3个回答
0
投票

Ajax调用不能用于下载,我想也不能用于上传文件。

你之前有没有尝试过设置这个 doSubmit:

Ext.Ajax.cors = true;
Ext.Ajax.useDefaultXhrHeader = false;

0
投票

解答:document.domain=document.domain是干什么的?http:/codeengine.orgextjs-fileuplaod-cross-origin-frame。


0
投票

如果有人面临同样的问题...... Extjs 6.6

目标: 使用fileUpload和form.submit与CORS.S一起使用。

问题:使用CORS.Issue.Upload和form.submit: ExtJS form.submit failed due to "accessing a cross-origin frame -> The file gets successfully uploaded however it ALWAYS returns FAILURE on form.submit Reason... "Blocked a frame with origin" -> The file gets successfully uploaded however it ALWAYS returns FAILURE on form.submit Reason... "Blocked a frame with origin"。http:/localhost:57007"访问一个跨源框架"。

解决办法: 不要使用form.submit,而是使用fetch。

查看

{
    xtype: 'form',
    reference: 'fileForm',
    items: [
        {
            xtype: 'fileuploadfield',
            buttonOnly: true,
            name: 'file',
            buttonConfig: {
                text: 'Attach',
                iconCls: 'x-fa fa-plus green',
                ui: 'default-toolbar-small'
            },
            width: 80,
            listeners: {
                change: 'onAttachFile'
            }
        }
    ]
},

查看控制器

/**
 *
 */
onAttachFile: function (cmp, newValue) {
    const self = this;
    const fileForm = self.lookupReference('fileForm');

    if (Ext.isEmpty(newValue) === false && fileForm.isValid()) {
        const file = cmp.fileInputEl.dom.files[0];
        const fileSizeInMB = parseFloat((file.size / (1024*1024)).toFixed(2));

        // Validating file size
        if (fileSizeInMB > 4)
            alert('File size exceeds the allowable limit: 4MB');
        else {
            const url = '' // URL goes here
            const headers = {} // Any special headers that you may need, ie auth headers
            const formData = new FormData();

            formData.append('file', file);
            fetch(url, {
                method: 'POST',
                headers,
                credentials: 'include',
                body: formData
            })
            .then(response => {
                response.json().then(json => {
                    if (response.ok) {
                        console.log(json);
                    }
                    else {
                        console.error(json);
                    }
                });     
            })
            .catch((error) => {
                console.error(error);
            });
        }
    }
},

相关帖子。

  1. extjs 6.01的跨源问题

  2. extjs form.submit因 "访问跨源框架 "而失败。

  3. 通过表单提交进行跨域的extjs文件上传。

  4. ExtJS 6.6.0在表单提交中启用CORS。

  5. https:/forum.sencha.comforumshowthread.php?368824-extjs-form-submit-failed-due-%E2%80%9Caccessing-a-cross-origin-frame%E2%80%9D。

  6. https:/forum.sencha.comforumshowthread.php?298504-Extjs-5-Fileupload-submit-error。

  7. https:/forum.sencha.comforumshowthread.php?294852。

  8. https:/forum.sencha.comforumshowthread.php?343448-跨源文件上传

© www.soinside.com 2019 - 2024. All rights reserved.