How to pass json obj value to API in angular (for post method)

Question

Here i am trying to post some data to API.but it does not work.because i have got 400 bad request.i think my service or typescript is not fine.when trying to postman I got the output.so i confirm my Web APi is working fine. actually I am new in angular.so please helpme for this i am a beginner.i search so many times here but didn't get the answer. here my api is accepting value by json obj like (Note i am using angular4 web Api)

{ 
 "Header": {

        "UserID": 6,
       "created": "February 4, 2016 10:13:00",
        ....etc........
     },

  "detail": [
{

  "ShopID": 1,
 "ItemID": 126,
.....etc.........
  },
  {     
 "ShopID": 1,
 "ItemID": 127,
.....etc.........
 }
 ]
 }

but my datas are passing to API is like (so i think this is the problem)

    [{
  "userid": "64",
  "created": "February 4, 2016 10:13:00",
  "CompanyID": "1",
  "modified": "February 4, 2016 10:13:00",
  "modifieduserid": "65",
  "confirm": "true",
  "ShopId": 1,
  "TransactionId": 1,
   "shopid": 12,
  "Itemid": 12928,
  "PackingTypeID": 3,
  "Itemcode": "124018",
  "Itemdescription": "COTTON GLOVES 350G",
  "PackingtypeName": "12 PCS",
  "Stockcount": 12

} ]

And this is my ts file

     stockitems: IStockCountHeaders[] = [];   
 items: IStockCountHeaders;
  stockdetail: IStockdetails[] = [];

  addItems(value: any) {
this.items = new IStockCountHeaders(this.userid, this.created, t this.confirm,this.shopid, 
 value.ItemID, value.PackingTypeID, value.ItemCode, value.ItemDescription, 
 value.PackingtypeName, 
    value.Stock,
   );
this.stockitems.push(this.items);
  }
onclick(){
 this._enqService.CatchStockDetailHeader(this.stockitems)
    .subscribe(value => {
        if (typeof value !== 'undefined' && value != null) {
            value.forEach(items => {
                this.stockitems.push(this.items)
            });
        }
    },
        error => {
            console.error(error);
            this.statusMessage = "Problem with the service.Please try again after sometime";
        });
 }

this is my angular service file

          CatchStockDetailHeader(stock: any)
    : Observable<IStockCountHeaders[]> {
    let IStockCounts = stock;  
    console.log(IStockCounts)
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    headers.append('userid', IStockCounts.userid);
    headers.append('created', IStockCounts.created);
    headers.append('.CompanyID', IStockCounts.CompanyID);
    headers.append('modified', IStockCounts.modified);
    headers.append('modifieduserid', IStockCounts.modifieduserid);
    headers.append('confirm', IStockCounts.confirm);    
    return this._http.post('http://localhost:3071/api/Stockcountheader/' + 'Stock', IStockCounts, options)
        .map((response: Response) => <IStockCountHeaders[]>response.json())
        .catch(this.handleError);
}

Answer 1

You are doing a cross domain request because you are posting to localhost:3071 and you usually host the Angular app on localhost:4200.

The two option are to either add an allow all header from the api or to use a proxy.

To allow cross domain request from your api add the header

Access-Control-Allow-Origin: *

on the server.

To use a proxy create a file called proxy.config.json

{
  "/api/*": {
    "target": "http://localhost:3071/api/",
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true,
    "secure": false,
    "logLevel": "debug"
  }
}

and serve with

ng serve --proxy-config proxy.config.json

And instead of using

http://localhost:3071/api/

use

/api/