在平均堆栈上注册新用户时停滞 [Chrome 控制台上的未知错误]

Question

我一直在按照本教程 (https://www.sitepoint.com/user-authentication-mean-stack/) and referencing the github linked (https://github.com/sitepoint-editors/MEAN-stack-authentication) 学习 MEAN 堆栈。我在端口 3000 上使用 express，在端口 4200 上使用 angular，所以我不得不对我的 client/src/app/authentication.service.ts 文件进行一些更改，以便它尝试在端口 post 3000.

private request(method: 'post' | 'get', type: 'login' | 'register' | 'profile', user?: TokenPayload): Observable<any> {
    let base;

    if (method === 'post') {
      base = this.http.post("http://localhost:3000" + `/api/${type}`, user);
    } else {
      base = this.http.get("http://localhost:3000" + `/api/${type}`, { headers: { Authorization: `Bearer ${this.getToken()}` } });
    }

    const request = base.pipe(
      map((data: TokenResponse) => {
        if (data.token) {
          this.saveToken(data.token);
        }
        return data;
      })
    );

    return request;
  }

我能够使用 cors 包修复 CORS 错误，但现在我检查开发工具，它只显示 "stalled" 直到我收到错误。

还不知道要做什么。

[1/29 更新]

我已将连接错误缩小到几行代码，但通过我的 chrome 开发控制台搜索似乎无法找到我知道如何追查的错误。

我在 register.component.html

上的表格

  <form (submit)="register()">
  <div class="form-group">
    <label for="name">Full name</label>
    <input type="text" class="form-control" name="name" placeholder="Enter your name" [(ngModel)]="credentials.name">
  </div>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" name="email" placeholder="Enter email" [(ngModel)]="credentials.email">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="credentials.password">
  </div>
  <button type="submit" class="btn btn-default">Register!</button>
</form>

表单在register.component.ts

中触发注册函数

export class RegisterComponent {
  credentials: TokenPayload = {
    email: '',
    name: '',
    password: ''
  };

  constructor(private auth: AuthenticationService, private router: Router) {}

  register() {
    this.auth.register(this.credentials).subscribe(() => {
      console.log("good");
      this.router.navigateByUrl('/profile');
    }, (err) => {
      console.error(err);
      console.error("there was an error trying to register user");
      console.error(this.credentials);
    });
  }
}

控制台不打印 "good"，这意味着连接在此处停止

this.auth.register(this.credentials).subscribe(() => {

在 chrome 开发控制台中，我在预览和响应选项卡下得到 "failed to load response data"。

TL;DR 我的应用程序出错，chrome 开发控制台错误消息打印 "Http failure response for http://localhost:3000/api/register: 0 Unknown Error"。需要知道如何查找特定错误。

Answer 1

在看到没有从应用程序后端加载任何信息后，我认为我的 app.js 文件可能有问题。

按此顺序放置我的包裹，请求成功。

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(cors());

仍然没有看到保存在数据库中的数据，但这是另一个 post 的问题。

在平均堆栈上注册新用户时停滞 [Chrome 控制台上的未知错误]

Stalled when registering new user on mean stack [Unknown Error on Chrome Console]

angular

authentication

mean-stack

user-registration