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

如何解决在尝试在React / Node设置中使用Google+ API进行身份验证时，工作设置中出现CORS错误

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

前端在默认的localhost：3000上运行，后端（节点/表达式）在localhost：9001上运行，并且前端启用了代理以将请求重定向到后端。

昨晚我在后端siginIn contoller中工作时，能够使用Google进行身份验证的次数超过2打。经过Google的成功身份验证后，我还能够将该用户添加到我的Mongodb中。

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

我的Google配置如下。

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

Signing Component代码片段，将信息传递给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,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身份验证的正确响应。

前端错误。

解决方法

浏览器将首先发送飞行前请求以检查CORS。在您的后端代码中，您必须允许前端主机和端口。在这种情况下localhost：3000。 出现cors错误的原因是其在两个不同的端口上。 但是，如果后端（端口9000）给出了正确的cors响应，它将解决。

,

清除浏览器cookie和缓存可使一切再次正常运行。 googlesignin正常运作，没有cors错误。我添加了以下代码行，以提供从后端到前端的所有静态文件。

app.use(express.static(path.join(__dirname,'../frontend/public')));