尝试在React/节点设置中使用Google+ API进行身份验证时，工作设置中出现CORS错误
我使用Google实现了Oauth2.0身份验证。我在前端使用react- Google -login npm对使用Google Oauth2.0的用户进行身份验证。我成功地在google云平台下为我的项目创建了CLient-id和secret，并根据需要创建了URI。
前端运行在默认的localhost:3000上，后端(node/express)运行在localhost:9001上，并在前端启用代理，以将请求重定向到后端。
昨晚，当我在后端siginIn控制器上工作时，我使用谷歌进行了20多次身份验证。在Google认证成功后，我还可以将用户添加到我的Mongodb中。
突然，我收到了CORS错误，这有点奇怪，因为没有任何代码或谷歌配置被更改。
我的Google配置如下所示。
我在前端的代码仍然成功地将用户重定向到Google进行身份验证。它还生成了正确的google凭据。
将信息传递给驻留在withLogin HOC父组件中的responseGoogle的SignIn组件代码片段。
<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身份验证的正确响应。
前端的错误。
回答 2
Stack Overflow用户
发布于 2020-09-24 12:33:21
浏览器将首先发送飞行前请求以检查CORS。在后端代码中，您必须允许前端主机和端口。在本例中，localhost:3000。出现cors错误的原因是因为它位于两个不同的端口上。但是如果后端(端口9000)给出了正确的cors响应，它将被解析。
Stack Overflow用户
发布于 2020-09-24 13:39:50
清除浏览器cookie和缓存可以让一切恢复正常。googlesignin工作正常，没有出现cors错误。我已经添加了以下代码行，以提供从后端到前端的所有静态文件。
app.use(express.static(path.join(__dirname, '../frontend/public')));https://stackoverflow.com/questions/64039448
复制相似问题
腾讯云开发者
