Вызовите API REST POST с Angular 5 и HTTPClient

Question

Я создаю внешний интерфейс для своего бэкэнда с помощью Angular и испытываю проблемы с вызовом POST API с использованием HTTPClient.Ниже мой код:

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):

{error: «Коллекция» localhost: 8080 'not found »}

Можете ли вы показать мне, что я сделал неправильно и как мой угловой интерфейс не смог найти мою конечную точку бэкэнда?

Answer 1

Убедитесь, что приложение Spring работает на том же порту, что и 8080, и добавьте http перед вашим url. Я надеюсь, что это не ваша проблема, но попробуйте вот так ...

@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'
            }
        );
    }
}

EDIT

Добавьте класс Like Article и получите Id, который вы отправляете из Article class Angular Service

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

Answer 2

URL должен быть полным. включите http:

Но я бы посоветовал использовать прокси сервера dev вебпака.

Если вы поместите все свои apis в / api / url, тогда вы сможете проксировать все вызовы / api / * обратно в свой весенний бэкэнд.

затем, когда вы запускаете свой проект, вы делаете то же самое там и прокси в / api / *, используя nginx или аналогичный.

Вы можете узнать больше о том, как прокси, используя angular-cli здесь https://github.com/angular/angular-cli/wiki/stories-proxy