Question

我想使用form.submit()方法从extjs将文件上传到跨域服务器。当我呼叫form.submit()时，请求将转到我的restful Web服务，并且文件已成功上传。但是在浏览器上阻止了响应并显示以下消息：阻止了一个带有origi ... host的主机：1841“来访问一个跨源帧。

从较旧的帖子和表单提交代码中，我发现doSubmit()正在发送带有cors:true语句的Ajax请求，因为阻止了跨域响应。

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

php中是否有文件数据以form.doSubmit()的形式发送到服务器？有人可以帮我解决这个问题吗？

感谢。

解决方案是：What does document.domain = document.domain do?和http://codeengine.org/extjs-fileuplaod-cross-origin-frame/

Answer 1

Ajax调用不适用于下载，我假设上传文件。

您是否尝试在doSubmit：

之前设置此项

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

Answer 2

解决方案是：document.domain = document.domain做什么？和http://codeengine.org/extjs-fileuplaod-cross-origin-frame/

Answer 3

万一有人遇到相同的问题... Extjs 6.6

目标：将文件上传和form.submit与CORS结合使用。

问题：由于“访问跨域框架->文件已成功上传，但始终在form.submit原因上返回失败...”，ExtJS form.submit失败。源“ 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);
            });
        }
    }
},

extjs文件通过表单提交上传到跨域

3 个答案: