angular HttpClient post请求报错

Question

问题描述

才刚刚开始接触angularJs，提的问题也许很弱智，还是请大神们帮帮忙。
直接用ng-cli创建的新项目，跟着网上的教程敲了hero实例
大概了解了一点点angular的使用，现在卡在了http请求的部分。

问题出现的环境背景及自己尝试过哪些方法

用的是service和component分离的方法，请求方法封装在service里，return出来，在component里调用的
接口是用的别的项目的一个登录接口，能够使用的，不存在接口地址有误的情况
在最下方附上接口在另一个项目里的请求情况，是用ajax请求的
现在就是一直报404错误，但是没有在谷歌浏览器的NetWork里看到请求

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
...


@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...

    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false},
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

//service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json; charset=UTF-8'})
}
@Injectable({
  providedIn: 'root'
})
export class BusinessSystemService {
  private result;
  private testUrl = 'http://192.168.1.201:8080/user/login';
  // 测试远程
  getBusinessSystem(): Observable<any> {
    return this.http.post<any>(this.testUrl,
     {'username': 'pwy', 'password': '123456'}, 
     httpOptions).pipe(
      tap(list => console.log('getTestList success!')),
      catchError(this.handleError('getTestList Error'))
    );
  }
  private handleError<T> (operation = 'operation', result?: T) {
    return(error: any): Observable<T> => {
      console.error(error);
      // this.log(`${operation} failed:${error.message}`);
      return of(result as T);
    };
  }
  constructor(
    private http: HttpClient,
  ) { }
}

//component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';

import { BusinessSystemService } from '../business-system.service';


@Component({
  selector: 'app-business-system',
  templateUrl: './business-system.component.html',
  styleUrls: ['./business-system.component.css']
})

export class BusinessSystemComponent implements OnInit {
  testList: any;
  getTestList(): void {
    this.service.getBusinessSystem().subscribe(list => this.testList = list);
  }
  constructor(
    private service: BusinessSystemService,
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.getTestList();
  }

}

更换接口及方法

//component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';

// import { BusinessSystemService } from '../business-system.service';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json; charset=UTF-8'})
}
const param = new HttpParams().append('username', 'pwy').append('password', '123456');

@Component({
  selector: 'app-business-system',
  templateUrl: './business-system.component.html',
  styleUrls: ['./business-system.component.css']
})

export class BusinessSystemComponent implements OnInit {
  testList: any;
  getTestList(): void {
    // this.service.getBusinessSystem().subscribe(list => this.testList = list);
    this.http.get('http://192.168.0.66:9002/secondDel/getindexList', httpOptions)
    .subscribe((result) => {
      console.log('http success');
      this.testList = result;
    }, response  => {
      console.log('http error');
      console.log(response);
    }, () => {
      console.log('The POST observable is now completed.');
    });
  }
  constructor(
    // private service: BusinessSystemService,
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.getTestList();
  }

}

你期待的结果是什么？实际看到的错误信息又是什么？

更换接口及方法后

swagger 成功

Answer 1

有没有测试这个后端请求是否成功，404已经明显说明此API路由不存在了