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

我正在使用Google实现Oauth2.0身份验证。我在前端使用react google login npm使用google Oauth2.0对用户进行身份验证。我在谷歌云平台下为我的项目成功地创建了客户端id和密码，并根据需要创建了URI

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

昨晚，当我在后端siginIn contoller上工作时，我能够使用Google验证超过20次。在谷歌成功认证后，我还可以将该用户添加到我的Mongodb中

突然，我得到了CORS错误，这有点奇怪，因为没有任何代码或谷歌配置被更改

我的谷歌配置如下所示

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

登录组件代码段，将信息传递给位于withLogin HOC父组件中的ResponseLogle

            <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"}
          />

我正在将请求中相应的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')));

---

我试着在chrome浏览器上清除缓存和cookies。但是仍然不起作用。要么将CORS头添加到后端响应，要么从同一端口提供前端和后端服务。我已经使用npm包在后端启用了CORS。我已尝试使用新选项在特定路线上启用cors。如果我遗漏了什么，请告诉我。const cors=要求（“cors”）；常量app=express（）；应用程序使用（cors（））；var corsOptions={“origin”：“*”，“methods”：“GET，HEAD，PUT，PATCH，POST，DELETE”，“preflightContinue”：true，“options successstatus”：204}app.options（“/googlesignin”，cors（corsOptions））//为删除请求路由器启用飞行前请求。POST（“/googlesignin”，cors（corsOptions），authousinggoogle）；如果您的应用程序公开，

origin:

不安全。它应该指向前端应用程序是的，你是对的，我在cors选项下添加了白名单配置，包括前端ip和端口。

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