Question

我正在尝试设置一个带有输入类型文件的html表单。我想通过post请求将此文件上传到服务器，该服务器监听同一主机但不同的端口。我的表单目标是一个iframe，它在加载时使用新上传文件的_id接收数据。问题是我收到“Uncaught SecurityError：无法从'HTMLIFrameElement'中读取'contentDocument'属性：阻止具有原始”http://192.168.0.105:3001“的框架访问具有原始”http://192.168.0.105:3011“的框架。协议，域名和端口必须匹配。“

下面提供了带有一些不必要的硬编码的示例代码

'<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();

    ....

});

我知道我违反了跨域政策，但有没有简单的方法来绕过或破解它？

Answer 1

如果您控制其他网址，则可以使用PHP进行修复：

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

或

header('Access-Control-Allow-Origin: http://permitted_domain.com');

如果你不这样做，那就必须没有框架！

Answer 2

我的服务器都是节点服务器。在两者中我都有类似的配置：

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

这似乎没什么帮助。

Answer 3

将document.domain设置为两个文档中的相同值应该可以使其工作。

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Changing_origin：

“页面可能会因某些限制而改变自己的起源。脚本可以将document.domain的值设置为当前域的子集。如果它这样做，则较短的域用于后续的原始检查。“[...]

“端口号由浏览器单独保存。对setter的任何调用（包括document.domain = document.domain）都会导致端口号被null覆盖。因此，只能在第一个中设置company.com:8080，无法与company.com进行document.domain = "company.com"对话。必须在两者中设置它，以便端口号都是null。“

html表单操作跨域目标iframe

3 个答案: