node.js - 尝试在 React/Node 设置中使用 Google+ API 进行身份验证时，工作设置中出现 CORS 错误

问题描述

我正在使用 Google 实现 Oauth2.0 身份验证。我在前端使用 react-google-login npm 来使用 Google Oauth2.0 对用户进行身份验证。我在谷歌云平台下为我的项目成功创建了 CLient-id 和 secret，以及需要的 URI。

前端在默认 localhost:3000 上运行，后端（节点/express）在 localhost:9001 上运行，前端启用代理以将请求重定向到后端。

昨晚，当我在后端 siginIn 控制器上工作时，我能够使用 Google 进行超过 2 次的身份验证。在 Google 成功认证后，我还能够将用户添加到我的 Mongodb。

突然之间，我收到了 CORS 错误，这有点奇怪，因为没有更改任何代码或 Google 配置。

我的 Google 配置如下所示。

我在前端的代码仍然成功地将用户重定向到谷歌进行身份验证。它还生成正确的谷歌凭据。

登录组件代码片段将信息传递给驻留在 withLogin HOC 父组件中的 responseGoogle。

            <GoogleLogin
            clientId={GOOGLE_CLIENT_ID}
            buttonText="Google"
            render={(renderProps) => (
              <button onClick={renderProps.onClick} style={customStyle}>
                <img className="googleBtn" src={googleIcon} alt="GMAIL ICON" />
              </button>
            )}
            onSuccess={responseGoogle}
            onFailure={responseGoogle}
            cookiePolicy={"single_host_origin"}
          />

withLogin HOC 父组件将信息分派给 Redux thunk。

const responseGoogle = (res) => setGoogleResp(res);

    useEffect(() => {
      googleResp?.error &&
        setValues({ ...values, serverError: "GOOGLE LOGIN FAILED" });
      googleResp?.tokenId && dispatchGoogleSignInDataToBackend()
    }, [googleResp]);


    const dispatchGoogleSignInDataToBackend=async ()=>{
      const data=await dispatch(allActions.googleSignInAction(googleResp,whoLoggedIn));
      if (data.error) {
        setValues({ ...values, serverError: data.error, success: false });
      } else {
        const {
          email,
          name,
          _id,
          role,
          listOfEmailOfAllClientsForLawyerLogin,
        } = data.userCred;
        saveJwtToLocalStorage(
          data.token,
          { name, email, _id, role, listOfEmailOfAllClientsForLawyerLogin },
          () => {
            setValues({
              email,
              serverError: false,
              success: true,
            });
          }
        );
      }
    }

我正在将请求中的适当 CORS 标头发送到后端。

export const dataHeaders = {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json",
    "Access-Control-Allow-Headers" :"*"
  };

Redux thunk 代码：-

export const googleSignInAction=(googleResp,whoLoggedIn)=>{
  console.log("Login Success: currentUser:", googleResp);

  return async (dispatch) => {
    dispatch({ type: SIGNIN_LOADING });
    try {
      const response = await axios.post(
        `${API_URL}/googlesignin`,
        {
          googleResp,
          whoLoggedIn
        },
        {
          headers: dataHeaders,
        }
      );
      console.log("response inside googleSignInAction", response);
            // CHANGED COZ OF ESLINT WARNING.

      if (
        response.status === 201 &&
        Object.keys(response.data).includes("token") &&
        Object.keys(response.data).includes("userCred")
      ) {
        dispatch({ type: SIGNIN_SUCCESS, data: response.data });
        return response.data;
      } else {
        dispatch({ type: SIGNIN_FAILED });
      }
    } catch (error) {
      dispatch({ type: SIGNIN_FAILED });

      return error.response.data;
    }
  };
}

API URL 指向以下内容：-

export const API_URL="http://localhost:9001/api";

由于 CORS 错误，没有请求到达后端。

前端接收来自 Google Post 身份验证的正确响应。

前端的错误。

标签： node.jsreactjsexpressoauth-2.0google-oauth

node.js - 尝试在 React/Node 设置中使用 Google+ API 进行身份验证时，工作设置中出现 CORS 错误

问题描述

解决方案

推荐阅读