http http получить данные с пост-запроса

Question

У меня есть .net backback, который отлично работает.Но когда я собираюсь соединить это с угловым фронтом, у меня была эта проблема.Backend все запросы являются почтовыми запросами.Необходимо передать ApiKey в теле каждого запроса.С почтальоном он отлично работает.

Ошибка:

Почтальон:

resetService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class RestService {

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json'
    })
  };
  apiKey = {
    'ApiKey': 'MTIzNDU2Nrg='
  };

  constructor(private http: HttpClient) {
    console.log(this.httpOptions);
  }

  getProductCategories(): Observable<any> {
    return this.http.post<any>('http://restUrl:8029/ShoppingCartApi/GetProductList', this.apiKey, this.httpOptions);
  }

}

soap.component.ts

import { Component, OnInit } from '@angular/core';
import { RestService } from 'src/app/services/rest.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-soap',
  templateUrl: './soap.component.html',
  styleUrls: ['./soap.component.css']
})
export class SoapComponent implements OnInit {

  products: any = [];

  constructor(public rest: RestService, private route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    this.getProducts();
  }

  getProducts() {
    this.products = [];
    this.rest.getProductCategories().subscribe((data) => {
      console.log(data);
      this.products = data;
    });
  }

}

Любая помощь приветствуется ....

Answer 1

От почтальона, похоже, это может быть потому, что ваш API принимает необработанный контент для передачи apikey.Начиная с angular, вы передаете его как объект json.

Пожалуйста, попробуйте передать его как строку, чтобы увидеть, как оно работает.

Параметры CORS также необходимо проверить на API-интерфейсе сервера.

Answer 2

вы можете создать файл proxy.conf.json внутри корневой папки и добавить в него это содержимое.

{
  "/ShoppingCartApi/*" : {
    "target" : "http://resturl:8029",
    "secure" : "false",
    "logLevel" : "debug",
    "changeOrigin" : true
  }
}

и обслуживать его, используя ng serve --proxy-config proxy.config.json

Answer 3

Решением может быть HttpInterceptor, как описано здесь: https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8