HTTP POST-запрос для экспресс-сервера из углового интерфейса - PullRequest
Новая
       39

HTTP POST-запрос для экспресс-сервера из углового интерфейса

0 голосов
/ 24 ноября 2018

Я не смог выполнить POST-запрос к API, работающему на том же хосте, но на другом порту из углового интерфейса. Вот код: 

import { Component, OnInit } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-addbook',
  templateUrl: './addbook.component.html',
  styleUrls: ['./addbook.component.scss']
})
export class AddbookComponent implements OnInit {
  addForm: FormGroup;
  constructor(private formBuilder: FormBuilder, private http:HttpClient) {
  }
  ngOnInit() {
    this.addForm=this.formBuilder.group({
      title: ['', Validators.required],
      description:['', Validators.required],
      genre: ['', Validators.required],
      author: ['', Validators.required],
      publisher: ['', Validators.required],
      pages: ['', Validators.required],
      image_url: ['', Validators.required],
      buy_url: ['', Validators.required]
    });
  }
  onSubmit(){
    if(this.addForm.valid){
      console.log(this.addForm.value);
      const data = this.addForm.value;
      const headers=new HttpHeaders({'Content-Type':'application/json'});
      this.http.post("http://localhost:3000/api/books",headers,data).subscribe(
        res=>{
          console.log(res);
        },
        err=>{
          console.log('err:'+err);
        }
      );
    }
  }
}

Результат: Выходная консоль:

Output Console

Выходная сеть:

Output Network

если вы видите на втором рисунке заголовок был изменен на OPTIONS вместо post

http://localhost:3000/api/books - post api и http://localhost:4200 - front-конец угловой

что мне не хватает ??

1 Ответ

0 голосов
/ 24 ноября 2018

Если вы посмотрите на HttpClient, это post метод имеет подпись: 

post(
  url: string, 
  body: any, 
  options: { 
    headers?: HttpHeaders | { [header: string]: string | string[]; }; 
    observe?: HttpObserve; 
    params... = {}
): Observable<any>

Так вот: 

this.http.post("http://localhost:3000/api/books", headers, data)...

должно быть: 

this.http.post("http://localhost:3000/api/books", data, { headers })...

Данные полезной нагрузки (body) - это второй аргумент метода post, а затем приходитoptions, которые содержат такие вещи, как headers

ТАКЖЕ:

Просмотр предупреждений консоли выглядит так, как будто ваш Express Server блокирует запросы из-за политики CORS.

Вам также нужно включить CORS на вашем экспресс-сервере.Вот как

Установите CORS: 

npm install cors --save

Затем на вашем Express Server: 

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

ПРИМЕЧАНИЕ: Это всего лишь пример реализации иможет меняться в зависимости от вашей реализации.

...