使用 Angular 5 和 HTTPClient 调用 REST POST API

Question

我正在使用 Angular 为我的后端创建前端，并且在使用 HTTPClient 调用 POST API 时遇到了麻烦。以下是我的代码：

article.service.ts

@Injectable()
export class ArticleService {
    url = "//localhost:8080/deleteArticle";
    constructor(private http: HttpClient) { }

    deleteArticle(article: Article): Observable<HttpResponse<Article>> {
        return this.http.post<Article>(this.url, article,
            {
              observe: 'response'
            }
        );
    }
}

article.component.ts

@Component({
   selector: 'app-article',
   templateUrl: './article.component.html'
})
export class AcrticleComponent implements OnInit {
  articleForm: FormGroup;
  constructor(private formBuilder:FormBuilder, private articleService: ArticleService) {
  }
  ngOnInit() {
    this.articleForm = this.formBuilder.group({
      title: ['', [ Validators.required ] ]
    });
  }
  onFormSubmit() {
    let article = this.articleForm.value;
    this.deleteArticle(article);
    this.articleForm.reset();
  }
  deleteArticle(article: Article) {
    this.articleService.deleteArticle(article).subscribe(
      article => {
        console.log(article);
      },
      err => {
        console.log(err);
      }
    );
  }
  get title() {
     return this.articleForm.get('title');
  }
}

弹簧控制器：

    @PostMapping("/deleteArticle")
    @CrossOrigin(origins = "http://localhost:4200")
    public String deleteArticle(@RequestParam(value = "id") String id) {
        deleteService.deleteArticle(id);
    }

输入标题并点击提交后，返回此错误（状态404）：

{错误：“找不到集合'localhost:8080'”}

你能告诉我我做错了什么以及我的 Angular 前端如何找不到我的后端端点吗？

Answer 1

网址需要完整。 包括http：

但我建议使用 webpack 开发服务器代理。

如果您将所有 API 放在 /api/ url 下，那么您可以将所有对 /api/* 的调用代理回您的 Spring 后端。

然后当你启动你的项目时，你在那里做同样的事情，并在 /api/* 中使用 nginx 或类似的代理。

你可以在这里https://github.com/angular/angular-cli/wiki/stories-proxy阅读更多关于如何使用 angular-cli 代理的信息

Answer 2

确保您的 Spring 应用程序与 8080 在同一端口上运行，并在您的 url 之前添加 http。我希望这不是你的问题，但试试这样..

@Injectable()
export class ArticleService {
    url = "http://localhost:4200/deleteArticle";//add http here
    constructor(private http: HttpClient) { }

    deleteAccount(article: Article): Observable<HttpResponse<Article>> {
        return this.http.post<Article>(this.url, article,
            {
              observe: 'response'
            }
        );
    }
}

编辑

添加一个像Article 这样的类并获取您从Article 类Angular Service 发送的Id

    @PostMapping("/deleteArticle")
    @CrossOrigin(origins = "http://localhost:4200")
    public String deleteArticle(@RequestParam() Article article,
                                RedirectAttributes redirectAttributes) {
        deleteService.deleteArticle(article.id, redirectAttributes);
    }