Останавливается при регистрации нового пользователя в среднем стеке [Неизвестная ошибка на Chrome Консоль] - PullRequest
Новая
       82

Останавливается при регистрации нового пользователя в среднем стеке [Неизвестная ошибка на Chrome Консоль]

0 голосов
/ 27 января 2020

Я следовал этому руководству (https://www.sitepoint.com/user-authentication-mean-stack/) и ссылался на связанный github (https://github.com/sitepoint-editors/MEAN-stack-authentication) для изучения стека MEAN. Я использую express на порту 3000 и angular на порту 4200, поэтому мне пришлось внести несколько изменений в мой файл client / src / app / authentication.service.ts, чтобы он попытался опубликовать на порту 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 , но теперь я проверяю инструменты разработчика, и он просто показывает "зависание", пока не получит ошибку.

Пока не знаю, что делать.

[ОБНОВЛЕНИЕ 1/29]

Я сузил ошибку соединения до нескольких строк кода, но ищу через мою chrome dev консоль не может найти ошибку, которую я знаю, как преследовать.

Моя форма на 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);
    });
  }
}

Консоль не печатает "хорошо", что означает, что соединение останавливается здесь 

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

В консоли разработчика chrome я получаю "не удалось загрузить данные ответа "под вкладкой предварительного просмотра и ответа.

TL; DR У меня есть ошибка в моем приложении и chrome сообщение об ошибке консоли dev выводит «Http error response для http://localhost: 3000 / api / register : 0 Unknown Error». Нужно знать, как найти конкретную c ошибку.

1 Ответ

0 голосов
/ 30 января 2020

Увидев, что из серверной части приложения не загружается никакой информации, я подумал, что с моим приложением что-то не так. js file.

Поместил мои пакеты в этот порядок и запрос прошел. 

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

Все еще не видел данных, сохраненных в базе данных, но это другой вопрос для другого поста.

...