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

【问题标题】：extjs file uploads through form submit for cross domainextjs文件通过表单提交跨域上传
【发布时间】：2015-08-28 11:28:33
【问题描述】：

我想使用form.submit() 方法将文件从extjs 上传到跨域服务器。当我致电form.submit() 时，请求将发送到我的宁静网络服务，并且文件正在成功上传。但响应在浏览器处被阻止，并显示消息：Blocked a frame with origi...host:1841" from access a cross-origin frame。

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

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

php 有没有像form.doSubmit() 那样将文件数据发送到服务器？有人可以帮我解决这个问题吗？

谢谢。

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

【问题讨论】：

我不知道你该怎么做，但你试过standardSubmit: true吗？这将发送常规表单发布请求而不是 ajax 请求。此外，如果只是端口差异（但在同一台服务器上），一些 Web 服务器可以选择从标准端口反向代理到特殊端口，例如 nginx，例如this link，这样请求就在同一个端口上。
谢谢，我试过这个选项并观察到：响应在浏览器中显示为新页面。如果我导航到后面，那么我可以看到我的表格。尽管我发出了打印响应的警报，但它在页面中显示为新内容并且表单消失了。您能否帮助解释如何将响应打印为警报而不是打印为新页面？在生产中，在新页面中打开响应可能看起来不太好。
嗨，你能帮忙解决这个问题吗？我在同一个问题上被困了一周..

标签： extjs php javascript extjs

【解决方案1】：

如果有人遇到同样的问题... Extjs 6.6

目标：将 fileUpload 和 form.submit 与 CORS 一起使用。

问题：ExtJS form.submit 由于“访问跨域框架而失败 -> 文件已成功上传，但它总是在 form.submit 上返回 FAILURE 原因...”阻止了一个框架来源为“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);
            });
        }
    }
},

相关帖子：

【讨论】：

很好的答案。这应该被标记为解决方案。它不仅解决了 cors 问题，还可以通过这种方法发送自定义标头，这对于非 ajax form.submit 是不可能的，这在上传文件时会发生。

【解决方案2】：

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

你有没有试过在doSubmit之前设置这个：

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

【讨论】：

谢谢帕维尔。我没有试过这个。我需要在 doSubmit() 之前调用拦截器还是在调用 form.Submit() 之前在视图控制器中调用拦截器？
在调用form.Submit()之前在视图控制器中。
试过了。仍然是同样的错误：阻止了来自不同帧的原始访问的帧。目前我在 Tomcat 中运行我的服务器，在 sencha cmd 中运行 ExtJS。我是否收到此错误是因为我同时在两个不同的 Web 服务器和不同的端口（服务器：8080 和 ExtJS：1841）中运行？我的要求是：用户应该能够从任何机器访问我的表单并提交...
嗨，帕维尔。有没有其他解决方案？我在这个问题上被困了一周。你能帮忙吗？
没有那种问题，但我发现了：sencha.com/forum/… 和 stackoverflow.com/questions/17105193/… 和 abou-kone.com/2011/02/04/…

【解决方案3】：

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

【讨论】：