Javascript localhost:提供的postMessage目标源与收件人窗口'；起源
因此，我正在尝试构建一个应用程序，它使用sso对用户进行身份验证。以下是工作流程：Javascript localhost:提供的postMessage目标源与收件人窗口'；起源,javascript,html,node.js,reactjs,Javascript,Html,Node.js,Reactjs,因此，我正在尝试构建一个应用程序，它使用sso对用户进行身份验证。以下是工作流程： 在localhost:3000上启动应用程序（我使用的是一个web服务器） 应用程序） 将显示一个弹出窗口（实际上，该弹出窗口将调用my node js authentication route localhost:4000/authenticate，从而将用户重定向到sso身份验证页面） 身份验证后，sso服务器将用户重定向到节点回调路由（） node检查这是否是一个有效的用户并返回一条成功消息（实际上nod
- 在localhost:3000上启动应用程序（我使用的是一个web服务器） 应用程序）
- 将显示一个弹出窗口（实际上，该弹出窗口将调用my node js authentication route localhost:4000/authenticate，从而将用户重定向到sso身份验证页面）
- 身份验证后，sso服务器将用户重定向到节点回调路由（）
- node检查这是否是一个有效的用户并返回一条成功消息（实际上node将发送一个html+javascript代码来关闭弹出窗口）
- 如果收到的消息成功，我们将允许用户加载应用程序
handleLogIn() {
const msg = loginTab('http://localhost:4000/authenticate');
msg.then(response => {
console.log(response)
});
}
render() {
let loginButton = (<button onClick={this.handleLogIn.bind(this)}>Sign in</button>)
return (
<div>
{loginButton}
</div>
)
}
<!doctype html>
<html lang="fr">
<head>
<title>Login successful</title>
</head>
<body>
<h1>Success</h1>
<p>You are authenticated...</p>
</body>
<script>
document.body.onload = function() {
console.log( window.opener.location)
window.opener.postMessage(
{
status: 'success'
},
window.opener.location
);
};
</script>
</html>
登录成功
成功
您已通过身份验证
document.body.onload=函数（）{
console.log（window.opener.location）
window.opener.postMessage(
{
状态：“成功”
},
开窗器位置
);
};
我尝试将success.html中的window.opener.location更改为“localhost:3000”，它工作得很好，但对于生产环境来说这不是一个好主意。好吧，我尝试了很多方法，并使用此技术解决了我的问题。 在开发环境中，我使用了一个star来让它工作（这不是一个好的实践） 在生产中，我使用了真实的域名，而不是像这样使用localhost：
window.opener.postMessage(
{
status: 'success'
},
'http://my-server-domain:3000'
);
希望这能对某人有所帮助。听起来像是CSP错误。也许看看这个。谢谢你的帮助，马克，但对我来说，这似乎不是一个安全问题，因为我正在禁用chorme安全性（使用此选项--禁用web安全性），如果我将window.opener.location更改为localhost:3000，它就可以正常工作。这个错误肯定是由框架问题引起的。我刚刚使用PostMessageAPI完成了一个项目，并抛出了这个错误。这就是我修复它的方法。谢谢你的评论。我尝试使用frameguard将标题添加到我的响应中[现在我收到这个X-Frame-Options:ALLOW-FROM]，但不幸的是，我仍然有相同的错误。读这个。这将解决您的问题（我希望）=）
<!doctype html>
<html lang="fr">
<head>
<title>Login successful</title>
</head>
<body>
<h1>Success</h1>
<p>You are authenticated...</p>
</body>
<script>
document.body.onload = function() {
console.log( window.opener.location)
window.opener.postMessage(
{
status: 'success'
},
window.opener.location
);
};
</script>
</html>
window.opener.postMessage(
{
status: 'success'
},
'*'
);
window.opener.postMessage(
{
status: 'success'
},
'http://my-server-domain:3000'
);