英文:
Cross-Origin-Opener-Policy policy would block the window.closed call
问题
我在实现React.js中的Google登录时遇到了问题。我使用了@react-oauth/google。
我可以成功获取访问令牌,但出现了上述错误。请帮助我解决实现Google登录时的错误。
英文:
Everyone
I have faced a issues when implement Google Login in React.js
I used @react-oauth/google
import { Button, Typography } from '@mui/material'
import { GoogleOAuthProvider, useGoogleLogin } from "@react-oauth/google"
const googleClientId = process.env.REACT_APP_GOOGLE_CLIENT_ID
const googleIcon = (
<img alt="google" src="/static/images/icons/google-icon.svg" />
)
const GoogleLoginComponent = () => {
const googleLogin = useGoogleLogin({
flow: 'implicit',
onSuccess: async (tokenResponse) => {
try {
console.log(tokenResponse)
} catch (err) {
console.log(err)
}
},
onError: (errorResponse) => console.log(errorResponse)
})
return (
<Button
variant="outlined"
fullWidth
startIcon={googleIcon}
onClick={() => googleLogin()}
sx={{
padding: "11px 15px",
"& .MuiButton-startIcon": {
position: "absolute",
left: "15px",
},
textTransform: "capitalize",
color: "black",
}}
>
<Typography component="span">Continue with Google</Typography>
</Button>
)
}
const CustomGoogleLogin = () => {
return (
<GoogleOAuthProvider clientId={googleClientId}>
<GoogleLoginComponent />
</GoogleOAuthProvider>
)
}
export default CustomGoogleLogin
I can get access Token successfully but above error occurs.
Pls help me
I want to fix the error when implement google login
答案1
得分: 1
似乎这是一个错误。
当我尝试使用最新版本的Angular时,我遇到了相同的错误。
在头部添加以下 meta 标签可以解决这个问题:
<meta
http-equiv="Cross-Origin-Opener-Policy"
content="allow-popups"
/>
但在Chrome和Edge上不起作用。
如果您正在创建这个项目来学习React,请使用Firefox。
在Firefox上,它可以在没有上述 meta 标签的情况下正常工作。
但我知道,如果您正在开发一个生产就绪的系统,这不是一个真正的解决方案。
我希望它会很快得到修复。
英文:
It seems it is a bug.
I got the same error when I tried to use the latest version of angular.
This meta in the header would solve it:
<meta
http-equiv="Cross-Origin-Opener-Policy"
content="allow-popups"
/>
But it doesn't work on chrome and edge.
If you are making this project to learn react, use firefox.
On firefox, it works without the meta above.
But I know, this is not a real solution if you develop
a production ready system.
I hope it will be fixed soon.
答案2
得分: 0
这应该解决了问题,请将以下内容添加到你的index.html文件中:
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin" />
英文:
This should solve the issue add the following to your index.html file
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin" />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论