Google登录弹窗异常关闭及跨源相关错误的解决求助

我在自己的Web应用中集成了Google登录功能，但点击登录按钮后，本应弹出的选择邮箱的Google登录窗口加载2秒左右就立刻关闭了。打开浏览器控制台后，看到了下面这些错误信息：

cb=gapi.loaded_0?le=scs:187 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.

_.g.pB @ cb=gapi.loaded_0?le=scs:187
ov.pB @ cb=gapi.loaded_0?le=scs:191
_.aw @ cb=gapi.loaded_0?le=scs:197
_.ew @ cb=gapi.loaded_0?le=scs:201
_.kw @ cb=gapi.loaded_0?le=scs:206
Rx.Uo @ cb=gapi.loaded_0?le=scs:248
Rx @ cb=gapi.loaded_0?le=scs:247
_.Zx @ cb=gapi.loaded_0?le=scs:258
S$ @ cb=gapi.loaded_0?le=scs:374
P$ @ cb=gapi.loaded_0?le=scs:376
(anonymous) @ platform.js:76
(anonymous) @ platform.js:48
tc @ platform.js:39
ka @ platform.js:48
L.<computed>.L.<computed> @ platform.js:48
la @ platform.js:48
(anonymous) @ platform.js:48
tc @ platform.js:39
ka @ platform.js:48
Yc.L.<computed> @ platform.js:48
Yc.J.<computed> @ platform.js:48
(anonymous) @ cb=gapi.loaded_0?le=scs:1

cb=gapi.loaded_0?le=scs:124 Uncaught {error: 'idpiframe_initialization_failed', details: 'You have created a new client application that use…i/web/guides/gis-migration) for more information.'}

(anonymous) @ cb=gapi.loaded_0?le=scs:124
setTimeout (async)
_.ri @ cb=gapi.loaded_0?le=scs:124
(anonymous) @ cb=gapi.loaded_0?le=scs:162
cl @ cb=gapi.loaded_0?le=scs:155
Promise.then (async)
Yk @ cb=gapi.loaded_0?le=scs:155
_.bl @ cb=gapi.loaded_0?le=scs:155
wl @ cb=gapi.loaded_0?le=scs:161
dl @ cb=gapi.loaded_0?le=scs:160
(anonymous) @ cb=gapi.loaded_0?le=scs:155
(anonymous) @ cb=gapi.loaded_0?le=scs:249
nv.dispatchEvent @ cb=gapi.loaded_0?le=scs:172
_.kw.Zr @ cb=gapi.loaded_0?le=scs:207
(anonymous) @ cb=gapi.loaded_0?le=scs:199
_.g.Qca @ cb=gapi.loaded_0?le=scs:193
(anonymous) @ cb=gapi.loaded_0?le=scs:195

cb=gapi.loaded_0?le=scs:175 Cross-Origin-Opener-Policy policy would block the window.closed call.
wv @ cb=gapi.loaded_0?le=scs:175
(anonymous) @ cb=gapi.loaded_0?le=scs:175

cb=gapi.loaded_0?le=scs:175 Cross-Origin-Opener-Policy policy would block the window.closed call.
wv @ cb=gapi.loaded_0?le=scs:175
(anonymous) @ cb=gapi.loaded_0?le=scs:175

cb=gapi.loaded_0?le=scs:175 Cross-Origin-Opener-Policy policy would block the window.closed call.
wv @ cb=gapi.loaded_0?le=scs:175
(anonymous) @ cb=gapi.loaded_0?le=scs:175

cb=gapi.loaded_0?le=scs:175 Cross-Origin-Opener-Policy policy would block the window.closed call.

这是我的注册页面代码，里面集成了Google登录按钮：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<!-- Load the Google Platform Library -->
<script src="https://apis.google.com/js/platform.js" async defer onload="googleSignInInit()"></script>
<!-- Specify your app's client ID -->
<meta name="google-signin-client_id" content="my id">
<style>
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
flex-direction: column; /* Adjusted to column layout */
}
form {
max-width: 400px;
width: 100%;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
background-color: #fff;
margin-bottom: 16px; /* Added margin to separate the form and Google Sign-In button */
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
margin-bottom: 16px;
}
.g-signin2 {
margin-top: 16px;
margin-bottom: 16px;
}
</style>
</head>
<body>
<form id="signupForm" action="/signup" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<!-- Use a submit button to trigger form submission -->
<button type="submit">Sign Up</button>
</form>
<div class="g-signin2" data-onsuccess="onGoogleSignIn"></div>
<script>
// Function to handle Google Sign-In initialization
function googleSignInInit() {
gapi.load('auth2', function() {
gapi.auth2.init({
client_id: 'my id ',
});
});
}
// Function to handle Google Sign-In success
function onGoogleSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('Google Sign-In Success!');
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
// Add your logic to send the Google Sign-In data to the server (if needed)
sendGoogleSignInData(profile);
// Prevent the default Google Sign-In callback
googleUser.disconnect();
}
// Function to send Google Sign-In data to the server
function sendGoogleSignInData(profile) {
var googleSignInData = {
googleId: profile.getId(),
name: profile.getName(),
imageUrl: profile.getImageUrl(),
email: profile.getEmail()
};
fetch('/google/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(googleSignInData),
})
.then(response => response.json())
.then(data => {
// Handle the response if needed
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
}
</script>
</body>
</html>

我已经尝试过这些操作，但都没解决问题：

• 临时禁用了跨源 opener 策略
• 用无痕模式打开页面访问

另外我确认已经正确配置了客户端ID和密钥，代码里的my id是我替换后的占位内容（为了安全），重定向URL等所有配置参数也都设置正确了，但还是没法解决这个错误，有没有大佬能帮忙看看？

备注：内容来源于stack exchange，提问作者Pendyala Kedhareeswar