Http.post not working when 'application/json' set in header in Angular4 cli

Question

I am beginner in the Angular CLI, I have used the login api:'http://localhost/appointjobs/index.php/admin_api/index' using http.post but, I didn't get the post data in server side(codeigniter/php) when set 'content-type:application/json'. Below code I have used in the login services, and also getting post data when I used 'application/x-www-form-urlencoded' instead of 'application/json'.

DataService.ts file:  

import { BadInputError } from './../common/bad-input-error';
import { error } from 'selenium-webdriver';
import { AppError } from './../common/app-error';
import { Observable } from 'rxjs/Observable';
import { Http, ResponseOptionsArgs,RequestOptionsArgs,Headers,RequestOptions } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';
import { NotFoundError } from '../common/not-found-error';
import { Response } from '@angular/http/src/static_response';
import { HttpHeaders } from '@angular/common/http';



 @Injectable()
 export class DataService {

    constructor(private http:Http) {
 }



   getWhere(url,resource){
     let headers= new Headers();
     //headers.append('Access-Control-Allow-Origin:','*');
     headers.append('Accept','text/plain');
     headers.append('content-type','application/json');
     //headers.append('content-type','application/x-www-form-urlencoded');
     let option= new RequestOptions({headers:headers});

    return this.http.post(url,JSON.stringify(resource),option)
      .map(response=>response.json())
    .catch(this.handleError);
   }
 }

AuthService.ts file:

import { DataService } from './data.service';
import { Injectable } from '@angular/core';



@Injectable()
export class AuthService{

private url = 'http://localhost/appointjobs/index.php/admin_api/index';
constructor(private dataService:DataService) {
}

signIn(params:HTMLInputElement){
  this.dataService.getWhere(this.url,params)
  .subscribe(response=>{
    console.log(response);
  });
 }
}

do you do `this.getWhere(url, resource).subscribe()` anywhere? without a subscribe the call never actually fires — mast3rd3mon, Jan 31 '18 at 10:05
You don't have to specify headers.append('content-type','application/json'); — Fabio Campinho, Jan 31 '18 at 10:08
1. Don't use Http. It's deprecated. Use HttpClient, as documented: https://angular.io/guide/http. 2. If your backend API expects JSON, you need to send JSON. If it expects application/x-www-form-urlencoded, you need to set the right content type header, and to pass key/value pairs, in the application/x-www-form-urlencoded format. Setting the content type to application/x-www-form-urlencoded and sending a JSON body doesn't make any sense. — JB Nizet, Jan 31 '18 at 10:16
@JBNizet depends if he is using angular2/4 or angular 5 but yes, HttpClient is the better option — mast3rd3mon, Jan 31 '18 at 10:16
@mast3rd3mon he's using angular 4. But even if he was using angular 2, the first step should be to upgrade. — JB Nizet, Jan 31 '18 at 10:19
@mast3rd3mon, I already call getWhere function: this.dataService.getWhere(this.url,params) .subscribe(response=>{ console.log(response); }); — Mandip Vora, Jan 31 '18 at 10:24
@mast3rd3mon I just updated another code from where i called getWhere function — Mandip Vora, Jan 31 '18 at 10:30
@FabioCampinho he does have to specify the header else it defaults to a basic header type. its required for sending json or form encoded data — mast3rd3mon, Jan 31 '18 at 10:31
@JBNizet I just checked with application/x-www-form-urlencoded and it is working, but i want to must send json data to the server, Is this possible with http?, WIth application/x-www-form-urlencoded it is working then what is the issue with application/json? — Mandip Vora, Jan 31 '18 at 10:33
@MandipVora does the server expect json or form encoded data to be passed across? if it works with form encoded then chances are the server wont accept json — mast3rd3mon, Jan 31 '18 at 10:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/164245/discussion-between-mandip-vora-and-mast3rd3mon). — Mandip Vora, Jan 31 '18 at 10:46

Arun Kumaresh · Accepted Answer · 2018-02-01T14:42:43.333

2

Use FormData send your data to php

change your service to below

getWhere(url,resource){

     const formData: FormData = new FormData();
     formData.append('data', JSON.stringify(resource));

     let headers= new Headers();
     headers.append('Accept', 'application/json');

    return this.http.post(url,formData, { headers: headers })
      .map(response=>response.json())
    .catch(this.handleError);
   }
 }

and in your php

print_r($_POST['data']); // gives you the json

use

json_decode($_POST['data']) // converts your json string into object

edited Feb 01 '18 at 14:42

answered Jan 31 '18 at 10:39

Arun Kumaresh

6,211
6
32
50

I try with fromData but getting blank into post data. – Mandip Vora Jan 31 '18 at 10:45
is your resource contains the data check that – Arun Kumaresh Jan 31 '18 at 10:48
Yes getting data in post but incorrect format check this post data {"data":"{\"username\":\"ffdsfdsfdsfdsf\",\"password\":\"dsfdsfdsfsfsfs\"}"} – Mandip Vora Jan 31 '18 at 10:52
your getting this data in php ? – Arun Kumaresh Jan 31 '18 at 10:53
you have to decode the json to get desired result try json_decode($_POST['data]) – Arun Kumaresh Jan 31 '18 at 10:57
can downvoter plz explain why so that i can correct myself – Arun Kumaresh Jan 31 '18 at 11:05
you shouldnt stringify data you send across, a simple `{data: }` is enough, you should also add the Content-Type header – mast3rd3mon Jan 31 '18 at 11:13
you cant post the object to the server you should convert it json string so stringify is neccessary – Arun Kumaresh Jan 31 '18 at 11:40
Can i used HttpClient Instead of Http? if yes then which is used for best code? – Mandip Vora Jan 31 '18 at 12:44
@ArunKumaresh if you stringify, youre sending text, not json – mast3rd3mon Jan 31 '18 at 15:34
@MandipVora you can use HttpClient if you use angular 4+, its the newer of the 2 and Http will be deprecated in angular 6 so you might as well migrate now – mast3rd3mon Jan 31 '18 at 15:35
@mast3rd3mon its json string what i have mentioned you didnt read it ? – Arun Kumaresh Jan 31 '18 at 15:37
@ArunKumaresh to send the json object to the server as json, you DONT stringify the data, you just add it to the body or do something like `{data: {prop1: val1, prop2: ["Test"]}}`. if you stringify the data then the Content-Type headers needs to be `text/plain` as you would then be sending a string of data – mast3rd3mon Jan 31 '18 at 15:41
look at this https://stackoverflow.com/questions/37051476/how-do-i-post-json-in-angular-2 – Arun Kumaresh Jan 31 '18 at 16:32
@ArunKumaresh thats for the http.request, not standard http.get and http.post methods – mast3rd3mon Feb 01 '18 at 09:00
ok dude fine then why two users have rejected your edit suggestion ? are there were all also wrong ? and look at answers which was provided in the link properly – Arun Kumaresh Feb 01 '18 at 09:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/164324/discussion-between-mast3rd3mon-and-arun-kumaresh). – mast3rd3mon Feb 01 '18 at 10:11

Http.post not working when 'application/json' set in header in Angular4 cli

1 Answers1