React-Google-Login GoogleLogin 组件抛出 Invalid cookiePolicy 错误

Posted 2023-02-18

【中文标题】React-Google-Login GoogleLogin 组件抛出 Invalid cookiePolicy 错误

【英文标题】：React-Google-Login GoogleLogin component throwing Invalid cookiePolicy error

【发布时间】：2021-09-04 01:32:43

【问题描述】：

我正在使用 React 构建一个简单的网站，并且正在测试来自 https://www.npmjs.com/package/react-google-login 的 GoogleLogin 组件。我在 http://localhost:3000 上运行 react。我设置了允许该主机的 cookie 策略。但是，每次启动反应服务器时，我都会收到相同的错误：

“无效的 cookiePolicy - gapi.auth2.ExternallyVisibleError: 无效的 cookieP…Naq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0:1:6”

我还在 Google OAuth 凭据中添加了 http://localhost:3000 作为授权 javascript 源。在我的 index.js 文件中，我有：

import React from 'react';
import ReactDOM from 'react-dom';
import GoogleLogin from "react-google-login";

const responseGoogle = (response) => 
  console.log(response);


ReactDOM.render(
  <GoogleLogin
    clientId="296036318202-uraiim5u0cf5qpqhujl3aaj1kniuu41e.apps.googleusercontent.com"
    buttonText="Login"
    onSuccess=responseGoogle
    onFailure=responseGoogle
    cookiePolicy="http://localhost:3000/"
  />,
  document.getElementById('googleButton')
);

我尝试将 cookiePolicy 替换为“http://localhost:3000”，但随后它开始抱怨正在发送跨站点 cookie：

"通过指定其SameSite属性来指示是否在跨站请求中发送cookie"

【参考方案1】：

我遇到了这个问题，我发现我访问的页面是http://[::1]:3000/...而不是localhost。

当更改为 localhost:3000 时，它对我有用。

我认为 google 不喜欢 127.0.0.1、::1 或在本地文件中使用 gapi，因为这不安全。