angular http retrieve data with post request

Question

I have a .net backback which works perfectly. But when I'm going to connect it with angular front I had this issue. Backend all request are post requests. Need to pass an ApiKey in the body of each request. With postman it works perfect.

Error:

PostMan:

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

}

Any help is appreciated....

by the looks of it, you need to enable `CORS` on your server, also, dont post your private api keys online — mast3rd3mon, Jan 31 '19 at 13:22
You need to enable `CORS` or maybe use a proxy from angular to consume your backend, you just add a file to specify how to use the proxy in DEV mode. [Angular-cli proxy usage](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md) — Paulo Galdo Sandoval, Jan 31 '19 at 13:24
Thanks, It's not the original key.. But I can't change the server side. Also the CORS is presented in the header. — Danushka herath, Jan 31 '19 at 13:24
if you cant change the server stuff then you probably wont be able to do this, unless you can somehow trick your server into thinking the origin is the same — mast3rd3mon, Jan 31 '19 at 13:27
Am I wrong or CORS issue shouldn't happen in the OPTIONS request? does the request on POSTMAN contain the port 8029? — Nguyen Phong Thien, Jan 31 '19 at 13:51
@NguyenPhongThien CORS issues will happen on any request if CORS isnt enabled and the origin url doesnt ,match the server — mast3rd3mon, Jan 31 '19 at 14:17

score 2 · Accepted Answer · answered Jan 31 '19 at 16:20

you can create a proxy.conf.json file inside root folder and add this content in it.

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

and serve it using ng serve --proxy-config proxy.config.json

score -1 · Answer 2 · answered Jan 31 '19 at 14:20

-1

A solution could be a HttpInterceptor as described here: https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

answered Jan 31 '19 at 14:20

Gundelino85

49
3

Sorry, I have no Idea how to work with it in my case, – Danushka herath Jan 31 '19 at 15:42

score -1 · Answer 3 · answered Jan 31 '19 at 14:45

From postman, it looks this can be because your api is accepting raw content for passing apikey. From angular, you are passing it as json object.

Please try passing it as string to see it works.

CORS settings is also something you need to check on backend api.

angular http retrieve data with post request

3 Answers3

Linked