http.request возвращает "{type: 0}" до фактического ответа

Question

Каждый раз, когда я отправляю свою форму входа, код return res; в методе Login() (см. Ниже) выполняется дважды.

Первый ответ - простой объект { type: 0 }, второй - фактический ответ, который я ищу.

Почему бы return res; позвонили дважды? Как мне предотвратить это?

Я прошел по коду и подтвердил, что login() вызывается только один раз, мой HttpInterceptor вызывается только один раз, а удаленный запрос отправляется только один раз.

Я загрузил это изображение , чтобы помочь объяснить, что происходит. Вы можете видеть, что только 1 удаленный запрос был выполнен, но 2 ответа были зарегистрированы в консоли.

Эта проблема началась только несколько часов назад. Я боролся с получением ионной подачи для работы с CORS, я пытался использовать proxy.conf.json и proxy.js, но без доступа к API я не могу разрешить доступ. Для целей разработки я отключил CORS в Chrome, используя это расширение , поскольку после запуска приложения на мобильном устройстве CORS не требуется.

Дополнительная двойная стрельба, которую я пробовал:

1. Отключено расширение Allow-Control-Allow-Origin: * в Chrome, и проблема остается
2. Я удалил HttpInterceptor из app.module.ts, и проблема не исчезла
3. Я пробовал разные удаленные URL (даже локальный), и проблема не устранена
4. Завершение работы Chrome и перезагрузка ПК, и проблема не устранена
5. Попробовал с помощью FireFox и проблема не исчезла
6. Я создал новый проект Ionic4 и скопировал / вставил тот же код, и проблема не исчезла
7. Я пытался в Chrome на отдельной машине, и проблема остается

Вот моя login() наблюдаемая, на которую подписан в моем onSubmit() методе:

login(username: string, password: string) {

  const body = new FormData();

  body.append('username', username);
  body.append('password', password);

  const request = new HttpRequest('POST', '[URL]', body);

  return this.http.request(request)
  .pipe(map(res => {

    return res;

  }));

}

Вот мои onSubmit() и HttpInterceptor, если это поможет.

onSubmit () {

  this.isSubmitted = true; // I've put a break point here to make sure this method is called once

  if (!this.login.valid) {

    return;

  }

  this.authenticationService.login(this.login.value.username, this.login.value.password).subscribe((res: any) => {

  console.log(res); // this is the log that is displayed in the above screen shot

  });

}

export class AuthInterceptor implements HttpInterceptor {

  constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // Check auth here...

    return next.handle(request);

  }

}

Я ожидаю, что return res; будет вызван только один раз.

Answer 1

Оказывается, мне нужно было изменить

login(username: string, password: string) {

  const body = new FormData();

  body.append('username', username);
  body.append('password', password);

  const request = new HttpRequest('POST', '[URL]', body);

  return this.http.request(request)
  .pipe(map(res => {

    return res;

  }));

}

до следующего

login(username: string, password: string) {

  const body = new FormData();

  body.append('username', username);
  body.append('password', password);

  return this.http.post<any>(`[URL]`, body)
  .pipe(map(res => {
    return res;
  }));

}

Answer 2

Пожалуйста, используйте один оператор возврата вместо возврата 2 раза Попробуйте использовать приведенный ниже код, спасибо

login(username: string, password: string) {

  const body = new FormData();

  body.append('username', username);
  body.append('password', password);

  const request = new HttpRequest('POST', '[URL]', body);

  this.http.request(request)
  .pipe(map(res => {

    return res;

  }));

}