Angular 6: ошибка консоли: ошибка кода возврата бэкенда 200 - PullRequest
0 голосов
/ 18 декабря 2018

Я пытаюсь отправить данные в базу данных с помощью контактной формы, она отправляет данные в базу данных, но после сообщения об успешном завершении показывает сообщение об ошибке.Я также пытаюсь войти с предопределенными пользовательскими данными из базы данных.Но оно также показывает сообщение об ошибке во внешнем интерфейсе, а также в консольном сообщении «Внутренний код возвратил код 200, тело было: [объект Объект]».Как я могу получить решение этой. Эти ошибки показывают оба случая.пожалуйста, помогите ...., это cmspage.service.ts file:

import { Injectable } from '@angular/core';
import { Page } from './page';
import { Contact } from './contact';
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpBackend } from '@angular/common/http';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class CmspageService {

  ServerUrl = environment.baseUrl;
  errorData: {};

  httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
  };

  private http: HttpClient;

  constructor(handler: HttpBackend) {
      this.http = new HttpClient(handler);
  }


  contactForm(formdata: Contact) {
    return this.http.post<Contact>(this.ServerUrl + 'api/contact', formdata, this.httpOptions)
    .pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(`Backend returned code ${error.status}, ` + `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message
    this.errorData = {
      errorTitle: 'Oops! Request for document failed',
      errorDesc: 'Something bad happened. Please try again later.'
    };
    return throwError(this.errorData);
  }
}

Здесь я установил baseUrl в файл environment> environment.ts, форму обратной связи html:

<section class="cmspage mtb-40">
  <div class="container">
    <div class="page-desc" [hidden]="submitted">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <h1>Contact</h1>
          <form (ngSubmit)="onSubmit()" #contactForm="ngForm">
            <div class="form-group">
              <input type="text" name="name" id="name" [(ngModel)]="model.name" class="form-control" placeholder="Name" required #name="ngModel">
              <div *ngIf="name.invalid && (name.dirty || name.touched)" class="error">
                <div *ngIf="name.errors.required">
                  Name is required.
                </div>
              </div>
            </div>
            <div class="form-group">
              <input type="text" name="email" id="email" [(ngModel)]="model.email" class="form-control" placeholder="E-Mail" required email #email="ngModel">
              <div *ngIf="email.invalid && (email.dirty || email.touched)" class="error">
                <div *ngIf="email.errors.required">Email is required.</div>
                <div *ngIf="email.errors.email">Email must be a valid email address.</div>
              </div>
            </div>
            <div class="form-group">
              <input type="text" name="phone" id="phone" [(ngModel)]="model.phone" class="form-control" placeholder="Phone">
            </div>
            <div class="form-group">
              <textarea name="message" id="message" [(ngModel)]="model.message" rows="5" class="form-control" placeholder="Message" required #message="ngModel"></textarea>
              <div *ngIf="message.invalid && (message.dirty || message.touched)" class="error">
                <div *ngIf="message.errors.required">Message is required.</div>
              </div>
            </div>
            <div class="form-group">
              <button [disabled]="!contactForm.form.valid" class="btn btn-success">Send Message</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="service-error" *ngIf="error">
      <h1>{{error.errorTitle}}</h1>
      <h3>{{error.errorDesc}}</h3>
    </div>
    <div [hidden]="!submitted" class="contact-message">
      <div *ngIf="model.id" class="contact-success">
        <h2 class="success">Success!</h2>
        <h4>Contact form has been successfully submitted.</h4>
        <br />
        <button (click)="gotoHome()" class="btn btn-info">Go to Home</button>
      </div>
    </div>
  </div>
</section>

И здесь также появляется ошибка, это auth.service.ts , для входа в панель администратора

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  serverUrl = environment.baseUrl;
  errorData: {};

  isLoggedIn = false;

  constructor(private http: HttpClient) { }

  redirectUrl: string;

  login(username: string, password: string) {
    return this.http.post<any>(`${this.serverUrl}api/login`, {username: username, password: password})
    .pipe(map(user => {
        if (user && user.token) {
          localStorage.setItem('currentUser', JSON.stringify(user));
          this.isLoggedIn = true;
        }
      }),
      catchError(this.handleError)
    );
  }

  getAuthorizationToken() {
    const currentUser = JSON.parse(localStorage.getItem('currentUser'));
    return currentUser.token;
  }

  logout() {
    localStorage.removeItem('currentUser');
    this.isLoggedIn = false;
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(`Backend returned code ${error.status}, ` + `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message
    this.errorData = {
      errorTitle: 'Oops! Request for document failed',
      errorDesc: 'Something bad happened. Please try again later.'
    };
    return throwError(this.errorData);
  }

}

1 Ответ

0 голосов
/ 24 декабря 2018

Мне кажется, что бэкэнд успешно возвращается.Следовательно, вы получаете 200 статус.А также по этой причине вы не можете увидеть ошибки на вкладке сети.Потому что нет ошибки.Вы регистрируете статус, когда вызов на сервер успешен.Таким образом, код делает то, что должен делать.Но я могу сказать, что он не получает данные, как ожидалось.Сервер не возвращает данные, как вы ожидаете.Это может быть в случае сервера, возвращающего массив (или список объектов), но вы не ожидаете этого на внешнем интерфейсе.Попробуйте проверить, что сервер возвращает.Посмотрите на сигнатуру API или, если у вас есть внутренний код, посмотрите, что он возвращает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...