DOMException 阻塞 A 帧/跨原点帧，无法解决 [已关闭]

问：

我们在同一个域上遇到一个问题：8443（因此是不同的端口），以便用户在下订单打印之前查看上传的文件。

我们偶尔会遇到错误（当客户报告错误时）。奇怪的是，它只发生在 3 个用户中的 10 个用户中，仅在 Windows 上的 Chrome 中发生，而不是每个用户。DOMException: Blocked a frame with origin \https://posterprintshop.com\ from accessing a cross-origin frame.

我们的开发人员声称已遵循本文中@MarcoBonelli的建议：
SecurityError：阻止具有源的帧访问跨域帧

使用 window.postMessage 进行通信，但问题仍然存在，我们知道我们正在失去无数普通用户的业务，他们离开网站时认为他们的文件不会上传，因为这个错误隐藏在控制台中，很少有客户告诉我们。事实上，它不会发生在 Chrome 中的每个人身上，因此很难查明和解决。

在 Chrome 中上传文件时出现问题 https://posterprintshop.com/order-wizard

我们的开发人员缺少什么？

以下是页面上发生的事情的描述，使用我们的开发人员提供的代码，您可以在底部代码中看到他试图实现其他文章中建议的 postMessage 解决方案，但这仍然不起作用：

客户从我们的“订单向导”页面开始，https://posterprintshop.com/order-wizard 选择要上传的文件。成功上传后，这会触发我们的 /webv/ 页面的加载，Web 查看器应该加载上传的图像并将其显示在 PDFTRon 服务器的 iframe 中。这就是问题出现的地方 - 对于大多数用户来说，一切都很好，但对于 50% 的 Chrome 用户来说，我们遇到了跨域错误。

1. webv 页面代码包括 ID 为“viewer”的 div 元素，其中 WebViewer/PDFTron 执行上传图像的显示。

HTML 代码段：

<div id="viewer" class="viewer" style="background: url( <?php echo get_stylesheet_directory_uri() . '/images/pattern.jpg'; ?> ) repeat;"></div>

JS 片段：

var viewerElement = document.getElementById( 'viewer' );

2. 在 ID 为“viewer”的 div 元素下，WebViewer/PDFTron 注入一个 ID 为“webviewer-1”的 iframe，它将显示上传的图像。

片段：

<iframe id="webviewer-1" src=https://posterprintshop.com/wp-content/themes/hello-child/WebViewer/lib/./ui/index.html#d=https%3A%2F%2Fposterprintshop.com%2Fwp-content%2Fthemes%2Fhello-child%2Fpdftest.pdf&amp;preloadWorker=pdf&amp;a=1&amp;css=https%3A%2F%2Fposterprintshop.com%2Fwp-content%2Fthemes%2Fhello-child%2Fcss%2Fwebviewer.css&amp;filepicker=0&amp;pdfnet=0&amp;enableRedaction=0&amp;enableMeasurement=0&amp;pageHistory=1&amp;notesInLeftPanel=0&amp;useDownloader=0&amp;selectAnnotationOnCreation=0&amp;id=1 title="webviewer" frameborder="0" width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

JS 片段：

WebViewer( {
    path: '<?php echo get_stylesheet_directory_uri() .'/' ?>WebViewer/lib',
    licenseKey: '<License Key>',
    initialDoc: '<?php echo get_stylesheet_directory_uri() .'/' ?>pdftest.pdf',
    documentType: 'pdf',
    useDownloader: false,
    mobileRedirect: false,
    // fullAPI: true,
    css: '<?php echo get_stylesheet_directory_uri() .'/' ?>css/webviewer.css',
    }, viewerElement )
    .then( async ( instance ) => { 
    console.log( '==> [pdf.php] Instance object ', instance );

    const iframeDoc = instance.iframeWindow.document;
    const iframe = document.getElementById( 'webviewer-1' ).contentWindow;
    iframe.postMessage( 'iframeTriggerJS', 'https://posterprintshop.com' );
    window.addEventListener( 'message', function( event ) {
        console.log( '==> [pdf.php] Listener triggering from JS' );
        console.log( '==> [pdf.php] Event object ', event );
        const origin = event.origin;
        if ( origin === 'https://posterprintshop.com' ) {
            console.log( '==> [pdf.php] Listening...' );
            console.log( '==> [pdf.php] Event Data object ', event.data );
        }
    } );

} );

3. 我在 WebV 页面代码段中添加了以下代码片段：

<script>
    $ = jQuery.noConflict();
    $( function( $ ) {
        window.addEventListener( 'message', function( event ) {
            console.log( '==> [pdf.php] Listener triggering from WEBV' );
            console.log( '==> [pdf.php] Event object ', event );
            const origin = event.origin;
            if ( origin.startsWith( 'https://posterprintshop.com' ) ) {
                console.log( '==> [pdf.php] Listening...' );
                console.log( '==> [pdf.php] Event Data object ', event.data );
            }
        } );
    } );
</script>

4. 此外，在 JS Snippets 中添加了以下代码片段：

const iframe = document.getElementById( 'webviewer-1' ).contentWindow;
iframe.postMessage( 'iframeTriggerJS', 'https://posterprintshop.com' );
window.addEventListener( 'message', function( event ) {
    console.log( '==> [pdf.php] Listener triggering from JS' );
    console.log( '==> [pdf.php] Event object ', event );
    const origin = event.origin;
    if ( origin === 'https://posterprintshop.com' ) {
        console.log( '==> [pdf.php] Listening...' );
        console.log( '==> [pdf.php] Event Data object ', event.data );
    }
} );

希望有人能分析这一连串事件，为我们指明我们错过的方向？