Getting fail to authenicate the user in angular2

Question

I am trying to authenticate the user logging in ,but my data is not getting into server ,so I am getting failed even if I enter the correct email and password

This is my component,

import { Component } from '@angular/core';
import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from '@angular/common';
import { Http, Headers } from '@angular/http';
import { contentHeaders } from '../headers/headers';
  @Component({

directives: [ ROUTER_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES ],
 templateUrl : "./components/login/login.html",

   })
  export class Login {
    constructor(public router: Router, public http: Http) {
  }

  login(event, email, phone) {
   event.preventDefault();
   let body = JSON.stringify({ email, phone });
   var headers = new Headers();


   this.http.post('http://localhost/angular/index.php/profile/logIn',   body, {headers:headers})
  .subscribe(
    response => {
        if(response.json().error_code ==0){
             localStorage.setItem('social_id', response.json().id);
      this.router.navigate(['/demo/profile']);
     // console.log(body);
       alert('hi');
        }
        else{
     alert('fail');
        }
    },
    error => {
      alert(error.text());
      console.log(error.text());
      }
    );
   }
 }

My template,

 <div class="login jumbotron center-block">
  <h1>Login</h1>
  <form role="form" (submit)="login($event, email.value, phone.value)">
  <div class="form-group">
   <label for="username">Username</label>
    <input type="text" #email class="form-control" id="emailh" placeholder="Username">
  </div>
 <div class="form-group">
   <label for="password">Password</label>
    <input type="password" #phone class="form-control" id="phoneh" placeholder="Password">
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
   <a [routerLink]="['/signup']">Click here to Signup</a>

I think I have gone wrong at headers and I don't have idea about it can someone point out where the error is......

My server code(codeigniter)

<?php
header("Access-Control-Allow-Origin: *");

defined('BASEPATH') OR exit('No direct script access allowed');

class Profile extends CI_Controller
{
    public function index()
    {
        $this->load->view('welcome_message');
    }

    public function logIn()
    {

        $email = $this->input->post('email');
        $phone = $this->input->post('phone');
        $this->load->model("Profile_Model");
        $res = $this->Profile_Model->logIn($email, $phone);
        if ($res) {
            $message               = array();
            $message['error_code'] = 0;
            $message['message']    = 'success';
            $message['data']       = $res;
            echo json_encode($message);
            exit;

        } else {
            $message               = array();
            $message['error_code'] = 1;
            $message['message']    = 'fail';
            $message['data']       = new stdClass;
            echo json_encode($message);
            exit;
        }

    }
}

Answer 1

I think that you missed to set the Content-Type header in your code:

let body = JSON.stringify({ email, phone });
var headers = new Headers();
headers.append('Content-Type', 'application/json');

this.http.post('http://localhost/angular/index.php/profile/logIn',  
    { email, phone }, { headers })
    (...)

You can notice that from RC2, the header can be set implicitly based on what is provided as input. For example application/json for a JSON object, as described below:

this.http.post('http://localhost/angular/index.php/profile/logIn',  
    { email, phone })
    (...)