使用 passport-local-mongoose StackOverflow 在本地进行身份验证时出现错误请求

介绍

身份验证是网站开发中非常重要的一部分，而使用 Passport.js 可以让身份验证变得更加简单。Passport.js 是一个 Node.js 的身份验证中间件，可以用于 Express 应用程序。

在本地进行身份验证时，我们可以使用 Passport-local-mongoose 策略。它是 Passport.js 和 Mongoose（Node.js 的 MongoDB 驱动程序）的结合体，提供了一种简单的方式来处理用户名和密码信息。

然而，当我们在使用 Passport-local-mongoose 进行本地身份验证时，有时可能会遇到错误请求的问题。本文将介绍这个问题的解决方法。

问题

当使用 Passport-local-mongoose 进行本地身份验证时，可能会遇到以下错误请求：

POST /login 401 (Unauthorized)

在浏览器控制台中，可能会看到以下信息：

XMLHttpRequest cannot load http://localhost:3000/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. 

这个问题通常会发生在使用 Angular、React 或 Vue 等前端框架的 Web 应用程序中。

解决方法

要解决这个问题，可以执行以下步骤。

第一步：安装 cors 包

由于错误信息中提到“Access-Control-Allow-Origin”，因此我们需要添加 CORS（跨域资源共享）支持，以便在本地进行身份验证时可以从不同的源请求资源。

可以通过以下命令在项目中安装 cors 包：

npm install cors --save

第二步：在 Express 应用程序中启用 CORS

在 Express 应用程序中，需要添加以下代码以启用 CORS：

const cors = require('cors');
app.use(cors());

上述代码将在应用程序中启用 CORS。

第三步：在 Passport.js 策略中设置 allowCrossDomain 属性

在 Passport.js 策略中，需要添加以下代码以设置 allowCrossDomain 属性：

passport.use(new LocalStrategy({
  usernameField: 'username',
  passwordField: 'password',
  session: false
}, function (username, password, done) {
  User.authenticate()(username, password, function (err, user, options) {
    if (err) {
      return done(err);
    }
    if (user === false) {
      return done(null, false, options);
    }
    return done(null, user);
  });
}));

passport.serializeUser(function (user, cb) {
  cb(null, user.id);
});

passport.deserializeUser(function (id, cb) {
  User.findById(id, function (err, user) {
    if (err) {
      return cb(err);
    }
    cb(null, user);
  });
});

passport.authenticate('local', {session: false, failWithError: true, failureFlash: true});

passport.allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  if ('OPTIONS' === req.method) {
    res.send(200);
  } else {
    next();
  }
};

上述代码将在 Passport.js 策略中设置 allowCrossDomain 属性，以便与前端框架一起使用。

第四步：在 Express 应用程序中使用 allowCrossDomain 中间件

最后，在 Express 应用程序中使用 allowCrossDomain 中间件，以便在与前端框架进行身份验证时使用。可以通过以下代码实现：

app.use(passport.initialize());
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use('/', authRouter);
app.use(passport.allowCrossDomain);

上述代码将在 Express 应用程序中使用 allowCrossDomain 中间件。

现在，本地身份验证就能够正常工作了。

结论

在使用 Passport-local-mongoose 进行本地身份验证时，可能会遇到错误请求的问题。为了解决这个问题，需要添加 CORS 支持，以便在本地进行身份验证时可以从不同的源请求资源。同时，在 Passport.js 策略中，需要设置 allowCrossDomain 属性，并在 Express 应用程序中使用 allowCrossDomain 中间件。这样，本地身份验证就能够正常工作了。