在生产中直接表达到错误的端点，但在开发中完美地工作

Question

在生产环境中直接表达到错误的端点，但在开发中工作正常。我已经使用 express 作为后端构建了我的应用程序，并对前端和护照做出反应以进行身份​​验证，现在我面临着端点问题/auth/google。当我点击按钮时，它应该直接表达端点auth，但表达指向反应应用程序未找到组件。

只是我的应用程序没有点击端点auth/google而是呈现反应页面

这里的代码

服务器.js

app.use('/auth', require('./router/auth')) // should direct here
app.use('/media', require('./router/media')) 
app.use('/admin', require('./router/admin')) 
app.use('/user', require('./router/user'))

const httpServer = http.createServer(app)

if (process.env.NODE_ENV === 'production') {
 app.use(favicon(path.join(__dirname, '../' + 'build', 'favicon.ico')))

 app.use(express.static(path.join(__dirname, '../' + 'build')));

 app.get("*", (req, res) => { // but always goes here
 res.sendFile(path.join(path.join(__dirname, '../' + 'build', 'index.html')));
  });
}

const PORT = 8080

httpServer.listen(PORT, () => {
 console.log('Server up at:' + PORT)
})

/路由器/auth.js

router.get('/google', passport.authenticate('google', { // and should hit this 
  scope: ['profile', 'email']
}))
router.get(
  '/google/callback',
  passport.authenticate('google'),
  (req, res) => {
    req.app.set('user', res.req.user)
    return res.redirect('/auth/sign')
  }
)

module.exports = router

护照.js

export default function (passport) {
  passport.serializeUser(function (user, done) {
    done(null, user)
  })

  passport.deserializeUser(function (user, done) {
    done(null, user)
  })

  // GOOGLE OAuth
  passport.use(
    new GoogleStrategy(
      {
        clientID: GOOGLE_CLIENT_ID,
        clientSecret: GOOGLE_CLIENT_SECRET,
        callbackURL: '/auth/google/callback'
      },
      function (_, __, profile, done) {
        profile = {
          ...profile,
          email: profile.emails && profile.emails[0].value,
          profileUrl: profile.photos && profile.photos[0].value
        }
        authUser(profile, done) // function for save user
      }
    )
  )
}

反应 app.js

 <Switch>
          <Route path="/" exact component={Main} />
          <Route path="/home" exact component={Home} />
          <Route path="/ad/:id" exact component={Ad} />
          <PrivateRoute path="/postad" exact component={createAd} />
          <PrivateRoute path="/ad/edit/:id" exact component={UpdateAd} />
          <Route path="/user/:id" exact component={User} />
          <PrivateRoute path="/setting" exact component={Setting} />
          <PublicRoute path="/sign" exact component={ProviderSign} />
          <Route path="*" exact={true} component={PageNotFound} /> // but render this
 </Switch>

TLDR

我在设置时也重定向到反应页面"proxy": "http://localhost:8080"，并且在我http-proxy-middleware在客户端 src 文件夹上找到这个和设置代理之后

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

module.exports = app => {
  app.use(proxy("/auth/google", { target: "http://localhost:8080/" }));
  app.use(proxy("/auth/facebook", { target: "http://localhost:8080/" }));
};

当我在端口上启动我的节点服务器和端口上的8080客户端时，这工作正常之后3000，

这是我点击端点的登录页面按钮 /auth/google

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

module.exports = app => {
  app.use(proxy("/auth/google", { target: "http://localhost:8080/" }));
  app.use(proxy("/auth/facebook", { target: "http://localhost:8080/" }));
};

Answer 1

对我来说，一个解决方案是创建一个routes.js如下文件：

const express = require("express");
const router = express.Router();

const authRouter = require('./router/auth');
const mediaRouter = require('./router/media');
const adminRouter = require('./router/admin');
const userRouter = require('./router/user');

router.get("/", function(req, res, next) {
  res.status(200).json({
    isSuccess: true,
    message: "Server is up and running!"
  });
});

app.use('/auth', authRouter); 
app.use('/media', mediaRouter); 
app.use('/admin', adminRouter); 
app.use('/user', userRouter);

router.get("*", (req, res) => {
  res.status(200).json({
    isSuccess: false,
    message: "Invalid address!"
  });
});

module.exports = router;

将您的server.js文件修改为：

const httpServer = http.createServer(app);
const indexRouter = require("./routes"); // your routes.js

app.use("/api", indexRouter);

if (process.env.NODE_ENV === 'production') {
 app.use(favicon(path.join(__dirname, '../' + 'build', 'favicon.ico')))

 app.use(express.static(path.join(__dirname, '../' + 'build')));

 app.get("*", (req, res) => { // but always goes here
 res.sendFile(path.join(path.join(__dirname, '../' + 'build', 'index.html')));
  });
}

const PORT = 8080;

httpServer.listen(PORT, () => {
 console.log('Server up at:' + PORT)
})

最后将你的修改auth.js为：

router.get('/google', passport.authenticate('google', { // and should hit this 
  scope: ['profile', 'email']
}))
router.get(
  '/google/callback',
  passport.authenticate('google'),
  (req, res) => {
    req.app.set('user', res.req.user)
    return res.redirect('api/auth/sign') // Changed this endpoint
  }
)

module.exports = router

这种方法将 API 和前端路由分开。希望这对你有用。