Невозможно получить почтовый маршрут для работы в angular / node. js

Question

По какой-то причине я не могу заставить мой почтовый маршрут работать в моем приложении, хотя по какой-то причине он работает в Postman просто отлично.

Вот мой почтовый маршрут на Node Server:

app.route('/submit-supplies').post((req, res) => {
    res.send(201, req.body);
})

Вот мой сервисный файл:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { environment } from '../../environments/environment'

@Injectable({
  providedIn: 'root',
})
export class SuppliesService {
    public url = environment.url;

    httpOptions = {
        headers: new HttpHeaders({})
    };

    constructor(public http: HttpClient) {}

    onSubmitSupplies(value) {
        console.log(value);
        return this.http.post(this.url + `submit-supplies`, value);
    }

}

А вот мой компонент, который вызывает сервис:

 supplyList: FormGroup;

  constructor(private supplyService: SuppliesService) { }

  ngOnInit() {
    this.supplyList = new FormGroup({
      name: new FormControl('', [Validators.required]),
      email: new FormControl('', [Validators.required]),
      address1: new FormControl('', [Validators.required]),
      address2: new FormControl('', [Validators.required]),
      zipCode: new FormControl('', [Validators.required]),
      suppliesNeeded: new FormControl('', [Validators.required])
      // content: new FormControl('', [Validators.required])

    });

  }

  onSupplySubmit(){
    return this.supplyService.onSubmitSupplies(this.supplyList.value).subscribe(data => {
      console.log('hello');
    })
  }

Итак, отправляются данные формы. Console.log в функции onSubmitSupplies () службы не выполняет то, что мне нужно. Но он не попадает на мой почтовый маршрут.

Вместо этого я получаю эту ошибку:

Доступ к XMLHttpRequest по адресу http://localhost: 3000 / submit-supplies 'из источника' http://localhost: 4200 'был заблокирован политикой CORS: Access-Control-Allow-Headers в предпечатном ответе не допускает тип содержимого поля заголовка запроса.

Может кто-нибудь мне помочь?

Answer 1

Вы должны добавить на свой сервер узлов перед публикацией следующее:

const app = expess();

app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept");
res.setHeader('Access-Control-Allow-Methods',
    'GET, POST, OPTIONS, PUT, PATCH, DELETE');
next();
});

Если вы не используете все эти методы, удалите их из Access-Control-Allow-Methods