我不断收到 http POST http://localhost:3000/api/authenticate 404 (Not Found)

Question

我使用 angular 6 并在 authentcate uri 上开发此 api 时表示它返回 http://localhost:3000/api/authenticate 的 Http 失败响应：404 Not Found

我已经尝试删除我的 user.controller.js 上的响应，但问题仍然存在，它似乎在这里遗漏了一些要点，我不知道这是起初我收到一个错误，说之后无法发送标头它们被发送并且错误出现在我的 user.controller.js 上，否则返回 res.status(404).json(info);

这是我的 user.controller.js

const mongoose = require('mongoose');
const User = mongoose.model('User');
const passport = require('passport');
const _ = require('lodash');


module.exports.register = (req,res, next) => {


    const user = new User();
    user.fullname = req.body.fullname;
    user.email = req.body.email;
    user.College = req.body.College;
    user.Department = req.body.Department;
    user.password = req.body.password;
    user.admintype = req.body.admintype;
    user.save((err, doc) => {
        if(!err) { res.send(doc)}


        else
        {
            if(err.code == 11000)
            res.status(422).send(['Duplicate email Address Found.'])
            else
            return next(err);
        }
    }) 
}

module.exports.authenticate = (req, res, next ) => {
    //calll for passport authentication
    passport.authenticate('local', (err, user, info) => {
        //error form paasport middleware
        if(err) return res.status(400).json(err);
        //registered user
        else if (user) return res.status(200).json({ "token":user.generateJwt() });
        //unknown user or wrong password
        else return res.status(404).json(info);
    })(req, res);
}

module.exports.userProfile = (req, res, next) =>{
    User.findOne({ _id:req._id},
         (err,user) =>{
             if(!user)
             return res.status(404).json({ status: false, message : 'User Record not Found. '});
             else
             return res.status(200).json({  status:true , user : _.pick(user, ['fullname','email','university','College','Department','admintype'])});
         } );

}

这是我的 user.service.ts

```import { Injectable } from '@angular/core';
import { User } from './user.model';
import{ HttpClient, HttpHeaders } from '@angular/common/http';
import{ environment } from '../../environments/environment';
import { from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  selectedUser: User = {
    fullname:'',
    email:'',
    university:'',
    College:'',
    Department:'',
    password:'',
    admintype:''
  };

  constructor(private http: HttpClient) { }

  postUser(user:User)
  {
    return this.http.post(environment.apiBaseUrl+ '/register' ,user)
  }

  login(authCredentials)
  {
    return this.http.post(environment.apiBaseUrl+ '/authenticate',authCredentials);
  }

  setToken(token:string)
  {
    localStorage.setItem('token',token);
  }
}```

这是我的 sign-in.components.ts

```import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UserService } from 'src/app/shared/user.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {

  constructor( private userService:UserService, private router:Router) { }

  model = {
   email:'',
   password:''
  };

  emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/


  serverErrorMessages : string;
  ngOnInit() {
  }


  onSubmit(form :NgForm)
  {
   this.userService.login(form.value).subscribe( 
     res =>{
      this.userService.setToken(res['token']);
      this.router.navigateByUrl('/signup');
   },
   err =>{
     this.serverErrorMessages = err.message;

   });
  }
}```

这是我的环境.ts

```/ This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false,
  apiBaseUrl:'http://localhost:3000/api'
};

/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.```

这是我的 auth.js

```const router = require('express').Router();
const User = require('../controller/model/User');
const ctrlUser = require('../controller/user.controller');
const jwthelper = require('../jwtHelper')


//validation

router.post('/register', ctrlUser.register);
router.post('/authenticate',ctrlUser.authenticate);
router.get('/userProfile',jwthelper.verifyJwtToken,ctrlUser.userProfile);



module.exports = router;```

这是我的 index.js

```const express = require('express');
const app = express();
const mongoose = require('mongoose');
const dotenv = require('dotenv');
const cors = require('cors')
const bodyParser = require('body-parser');
require('./passportConfig');
const passport = require('passport');

dotenv.config();


//connect to mongodb
mongoose.set('useFindAndModify', false); mongoose.set('useUnifiedTopology', true);
mongoose.connect(process.env.DB_CONNECT,{ useNewUrlParser:true} , () =>
console.log('connected to db!')
);

//import routes
const authRoute = require('./routes/auth');

//middleware
app.use(bodyParser.json());
app.use(cors());
app.use(passport.initialize());

//error handler
app.use((err, req, res, next) =>{
    if(err.name =='ValidationError')
    {
        var valErrs = [];
        Object.keys(err.errors).forEach(key => valErrs.push(err.errors[key].message));
        res.status(422).send(valErrs);
        next();
    }
});


//route middleware
app.use('/api',authRoute);



app.listen(3000, () => console.log("server Up and Running"));```

对此有任何帮助，谢谢大家

Answer 1

唯一剩下的就是像这样将您在auth.js 文件中定义的路由器附加到您的快速应用程序中

const authRouter = require('./auth');

并为auth.js 文件中定义的所有路由添加前缀，您将其附加为中间件，该中间件在带有\api 的路由前缀上触发 const express = require('express');

const app = express();

// define all your middleware and all other route

// and here you attach the auth router
app.use('\api', authRouter);

这将使身份验证在 url http://localhost:3000/api/authenticate 上可用

Answer 2

您也可能因为身份验证路由中的这一行而得到 404（顺便说一下，我认为这一定是 400 - 错误请求，而不是 404，这会造成混乱。）

else return res.status(404).json(info);

所以要理解这一点，你能不能像这样替换你的身份验证路由，并查看 api 控制台中的日志：

module.exports.authenticate = (req, res, next ) => {
  console.log("req.body: ", req.body)
  //calll for passport authentication
  passport.authenticate('local', (err, user, info) => {
      //error form paasport middleware
      if(err) return res.status(400).json(err);
      //registered user
      else if (user) return res.status(200).json({ "token":user.generateJwt() });
      //unknown user or wrong password
      else {
        console.log("info: ", info)
        return res.status(400).json(info);
      }
  })(req, res);

还有角度组件，你能不能像这样改变你的 onSubmit 以便于调试：

确保您的 form.value 正确：

  onSubmit(form :NgForm)
  {
    console.log("form.value: ", form.value);

   this.userService.login(form.value).subscribe( 
     res =>{
      this.userService.setToken(res['token']);
      this.router.navigateByUrl('/signup');
   },
   err =>{
     console.log("err: ", err.message)
     this.serverErrorMessages = err.message;

   });
  }