为PassportJS创建React App代理到快递服务器不工作

Question

花了几天时间试图为我的反应应用程序设置一个代理到我的Express后端，我在其中使用passportjs进行gooogle社交身份验证。

PORT 5000上的PORT 3000 express服务器上的react-dev服务器

当我单击该按钮时，它会重新加载页面，但不会启动passportJS google auth过程（即不会重定向到oAuth2流）。

<Button href='/auth/google'> Link Button </Button>

• curl正确代理从端口3000到5000的呼叫
• 当我直接转到在此处创建的express serverendpoint时，PassportJS流程可以正常工作：http://localhost:5000/auth/google

关键代码段在下面，应该允许代理从反应前端工作到表达护照JS Oauth2流。

package.json

"proxy": "http://localhost:5000"

应用.js

  <a href="auth/google/" target="">
    <Button> Link Button </Button>
  </a>

服务器.js

app.get('/auth/google',
    passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/userinfo.email', 
                                                'https://www.googleapis.com/auth/userinfo.profile',
                                                'openid'] }),
);
   

setupProxy.js（设置代理.js）

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
    app.use(proxy('/auth', { target: 'http://localhost:5000/' }));
};

Answer 1

我最终不需要包.json代理条目。这些是所有部分，使一切按预期工作。

我在/client目录中有一个前端应用程序，我在其中使用了create-ract-app。

从创建反应应用程序（客户端目录）的pack.json中，我删除了这个，因为http代理中间件似乎需要commonjs导入“类型”：“模块”，

setupProxy.js（设置代理.js）

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
    app.use(proxy('/auth/google', { target: 'http://localhost:5000/' }));
};

App.js使用材质UI按钮

<Button href="/api/auth/google" variant="contained" color="primary">

索引.js用于护照JS配置和快速服务器

在passportGoogle.strategy选项中，将其设置为与配置的其余部分一致

callbackURL: `/api/auth/google/callback`


app.get('/api/auth/google',
    passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/userinfo.email', 
                                                'https://www.googleapis.com/auth/userinfo.profile',
                                                'openid'] }),
);
   
app.get('/api/auth/google/callback', 
    passport.authenticate('google', { failureRedirect: '/failed' }),
        function(req, res) {
            res.redirect('http://localhost:3000');
        }
);

谷歌控制台

URI

http://本地主机:3000

授权重定向URI

http://localhost:3000/api/auth/google/callback