如何解决http://localhost:5000/auth/google/callback 404 错误
我正在尝试让我的后端开发服务器和我的微前端开发服务器很好地协同工作。我面临的挑战是前端是一个微前端,在我的例子中是两个独立的开发前端服务器,需要连接到一个后端开发服务器。
后端通过 localhost:5000/auth/google 有一个 Google OAuth 流程。
所以我需要在我的 mfe 的 auth/
子应用上实现一个 Google 登录。
因此,如果这是一个整体式前端,那对我来说很简单,因为我只需在 客户端 端安装 http-proxy-middleware
,或者至少现在是这样做的。
但是,使用微前端时,我的想法是,这个库只需要安装在我的 mfe 的 auth/
子应用程序中,在那里完成身份验证工作。
但是,我的理解是 CRA 会查找我在安装该库后必须创建的 setupProxy.js
文件,但是我的微前端不是使用 CRA 创建的,所以这是否意味着我需要创建一个以老式的方式代理?
通过进入我的 package.json
子应用程序中的 auth/
文件并像这样写入:
"proxy": {
"/auth/google": {
"target": "http://localhost:5000"
}
}
我问是因为当我试图点击这个链接时:
export default function SignIn({ onSignIn }) {
const classes = useStyles();
return (
<Container component='main' maxWidth='xs'>
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component='h1' variant='h5'>
Do not provide your credentials. You can simply click the Sign in
button to see our future dashboard
<hr />
<a href='http://localhost:5000/auth/google'>Sign In With Google</a>
</Typography>
<form
onSubmit={(e) => e.preventDefault()}
className={classes.form}
novalidate
>
当然只是测试一下,这不是最终产品,我在控制台中收到以下错误:
获取 http://localhost:5000/auth/google/callback?code=4%2F0AY0e-g5D_VhmwLDSBaLdmlZ10BJQljRL3P0C28fIaQE8NqbQqgRiF-INflN3zEYFmpHFTw&scope=email+profile+com%2Fauthgoogleinfo.com 3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&authuser=0&prompt=none 404(未找到)
我没有在浏览器中得到 redirect_uri_mismatch,而是得到:
Cannot GET /auth/google/callback
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。