跨域打开策略将阻止window.closed调用。

huangapple go评论64阅读模式
英文:

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

enter image description here

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:

&lt;meta
   http-equiv=&quot;Cross-Origin-Opener-Policy&quot;
   content=&quot;allow-popups&quot;
/&gt;

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

&lt;meta http-equiv=&quot;Cross-Origin-Opener-Policy&quot; content=&quot;same-origin&quot; /&gt;

huangapple
  • 本文由 发表于 2023年7月11日 14:11:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76659128.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定