sendMessage 导致“未捕获的 DOMException：访问跨域对象上的属性 Symbol.toPrimitive 的权限被拒绝”答案

【问题标题】：sendMessage causes "Uncaught DOMException: Permission denied to access property Symbol.toPrimitive on cross-origin object"sendMessage 导致“未捕获的 DOMException：访问跨域对象上的属性 Symbol.toPrimitive 的权限被拒绝”
【发布时间】：2022-02-04 01:10:21
【问题描述】：

我是一名开发人员，想在 Cordova 应用的 iframe 中加载我的网络应用。

我已按照https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage 中的所有步骤进行操作。

我的 iframe：

    <iframe src="https://www.myweb.com" id="appFrame" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"> Your browser doesn't support iframes </iframe>

在cordova main html js（index.js）中：

window.onload = function() {
window.addEventListener("message", (event) => {
    alert("app - " + data);

}, false);

var frame = document.getElementById('appFrame').contentWindow;
setInterval(function() { console.log("frame " + frame); frame.postMessage('action', '*'); }, 1000);

在我的网络应用程序中：

window.addEventListener("message", (event) => {
        alert("event message " + event.data);
        if (event.data == 'action') {
            (event.source as Window).postMessage(command, event.origin);
            window.addEventListener("message", (event) => {
                callback(event.data);
                event.stopImmediatePropagation();
                return true;
            }, false);}
        event.stopImmediatePropagation();
        return true;
    }, false);
}

我在 Cordova 中使用“浏览器”平台运行该应用程序，该平台使用以下设置创建本地服务器：

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-navigation href="*://*.myweb.com/*" />

我的 Web 应用程序在 Laravel 中启用了以下标头：

->header("Cross-Origin-Opener-Policy", "same-origin") // unsafe-none same-origin same-origin-allow-popups
 ->header("Cross-Origin-Embedder-Policy", "require-corp") // unsafe-none require-corp
 ->header("Access-Control-Allow-Origin", "*")
 ->header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE")
 ->header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, X-Token-Auth, Authorization");

但我总是在执行“frame.postMessage('action', '*');”时得到错误“Uncaught DOMException: Permission denied to access property Symbol.toPrimitive on cross-origin object”。

有谁知道可能是什么问题？

提前致谢。

【问题讨论】：

标签： javascript cordova iframe cross-domain

【解决方案1】：

您使用

从服务器发回非 CORS 标头

 header("Cross-Origin-Opener-Policy", "same-origin")

Cordova 应用程序没有域/来源。您需要设置一个 CORS 后端。

【讨论】：