Javascript html表单操作跨域目标iframe

我正在尝试设置一个包含输入类型文件的html表单。我想通过post请求将此文件上载到一个服务器，该服务器侦听同一主机但不同的端口。我的表单目标是一个iframe，它在加载时接收带有新上传文件的_id的数据。问题是，我收到“Uncaught SecurityError:未能从“HTMLIFrameElement”读取“contentDocument”属性：阻止源代码为“”的帧访问源代码为“”的帧。协议、域和端口必须匹配。下面提供了一些不必要的硬编码示例代码

'<form id="{id}_form" action="http://192.168.0.105:3011/private/profile_picture/upload" enctype="multipart/form-data" method="post" target="{id}_uploadframe">',
'<span id="{id}_wrapper" class="file-wrapper">',
    '<input id="{id}_real" type="file" accept="image/*" name="photo" />',
    '<span class="button">{0}</span>',
'</span>',
'</form>',
'<iframe id="{id}_uploadframe" name="{id}_uploadframe" class="mc-hidden"></iframe>'


Ext.fly( this.id + '_uploadframe' ).on( 'load', function( evt, el )
{
    var data = el.contentDocument.body.innerHTML;
    try
    {
        data = Ext.JSON.decode( data, true );
    }
    catch( ex )
    {
        data = {};
    }

    ........

    if( data && data.success === true )
    {
        if (me.cbUpload) {
            me.cbUpload(data);
        }
        .......
    }, this );
}


Ext.fly( this.id + '_real' ).on( 'change', function( evt, el )
{
    ....

    var form = document.getElementById( me.id + '_form' );
    form.submit();

    ....

});

”，
'',
'',
'{0}',
'',
'',
''
Ext.fly（this.id+''u uploadframe'）.on（'load'，函数（evt，el）
{
var data=el.contentDocument.body.innerHTML；
尝试
{
data=Ext.JSON.decode（数据，true）；
}
捕获（ex）
{
数据={}；
}
........
if（data&&data.success==true）
{
如果（me.cbUpload）{
me.cbUpload（数据）；
}
.......
}，这个）；
}
Ext.fly（this.id+''u real'）.on（'change'，function（evt，el）
{
....
var form=document.getElementById（me.id+''u form'）；
表单提交（）；
....
});

---

我知道我违反了跨域策略，但是有什么简单的方法可以绕过或破解它吗

如果您控制另一个URL，您可以在那里使用PHP来修复它：

header('Access-Control-Allow-Origin: *');

或

---

如果你不这样做，它将不得不在没有框架的情况下发生

我的服务器都是节点服务器。在这两种情况下，我的配置相似：

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://192.168.0.105:3011');

    // THE OTHER ONE IS CONFIGURED SIMILAR
    res.setHeader('Access-Control-Allow-Origin', 'http://192.168.0.105:3001');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    next();
});

---

这似乎一点帮助都没有

将两个文档中的

document.domain

设置为相同的值应该可以实现此功能

:

“页面可能会更改其自身的来源，但有一些限制。脚本可以将

document.domain

的值设置为当前域的子集。如果这样做，则较短的域将用于后续的来源检查。”[…]

“浏览器单独保存端口号。对setter的任何调用，包括

document.domain=document.domain

，都会导致端口号被

null

覆盖。因此，仅通过设置

document.domain=“company.com”无法使
company.com:8080
与
company.com
通话。”

在第一个字段中。必须在两个字段中都设置，以便端口号都

null

”

---

CORS头应用于XMLHttpRequest2而不是

，因此您必须使用XHR，然后从同一来源设置

的内容（例如，将其指向

关于：空白
可能？）“这似乎一点帮助都没有”—这使得这不是一个答案。如果你有什么要添加到你的原始问题中，那么通过编辑它来添加，而不是错误地使用回答功能。这是一个线程，所有的回答都是线程相关的。线程更容易按时间顺序排列，但ofc总是有一个人手里拿着公牛的球。“这是一条线程”——不，不是。因此，这不是你的标准xxBB论坛类型的网站，因此请尊重这一点，并相应地采取行动。“而且线程更容易按照时间顺序排列”——好吧，一旦答案被投票，默认的排序顺序就会改变。如果你以前没有被说服，至少你应该接受你的论点在这里是无效的。
// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://192.168.0.105:3011');

    // THE OTHER ONE IS CONFIGURED SIMILAR
    res.setHeader('Access-Control-Allow-Origin', 'http://192.168.0.105:3001');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    next();
});