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 (将#修改为@）