Getting 401 Unauthorized on Post method [ Front end - Angular 2 & Back end - Cakephp 3]
<p>I am using Angular 2 for Front end &amp; Back end in Cakephp 3. I am getting 401 Unauthorized status while I am trying to login. I have configured JWT in cakephp 3 and it is working fine in POSTMAN. But not working with Angular.</p>

<p>Here is my TypeScript code </p>

<pre><code>loginToken(uname: string, pwd: string): Observable&lt;boolean&gt;{
  let json = JSON.stringify({ username: uname , password: pwd});
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');
  let options = new RequestOptions({ headers: headers });

  return this.http.post('http://localhost/crm/crm/api/users/token', json, options)
    .map((response: Response) =&gt; {
      let token = response.json() &amp;&amp; response.json().token;
      if (token) {
        this.token = token;
        localStorage.setItem('currentUser', JSON.stringify({ username: uname, token: token }));
        return true;
      } else {
        return false;
      }
    });
}
</code></pre>

<p>Cakephp 3 code - server side </p>

<pre><code>public function token()
    {   
        $user = $this-&gt;Auth-&gt;identify();
        if (!$user) {
            throw new UnauthorizedException('Invalid username or password');
        }

        $this-&gt;set([
            'success' =&gt; true,
            'data' =&gt; [
                'token' =&gt; JWT::encode([
                    'sub' =&gt; $user['id'],
                    'exp' =&gt;  time() + 604800
                ],
                Security::salt())
            ],
            '_serialize' =&gt; ['success', 'data']
        ]);

    }
</code></pre>

<p>Here are some screenshots
<a href="https://i.stack.imgur.com/UGQMY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UGQMY.png" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/3SJIe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3SJIe.png" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/xEvFV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xEvFV.png" alt="enter image description here"></a>
Please help me out on this.</p>

<p>After removing options -</p>

<pre><code>loginToken(uname: string, pwd: string): Observable&lt;boolean&gt;{
  let json = JSON.stringify({ username: uname , password: pwd});
  let headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');
  let options = new RequestOptions({ headers: headers });

  return this.http.post('http://localhost/crm/crm/api/users/token', json, {headers: headers })
    .map((response: Response) =&gt; {
      let token = response.json() &amp;&amp; response.json().token;
      if (token) {
        this.token = token;
        localStorage.setItem('currentUser', JSON.stringify({ username: uname, token: token }));
        return true;
      } else {
        return false;
      }
    });
}
</code></pre>

<p>and response I got </p>

<p><a href="https://i.stack.imgur.com/DKZRQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DKZRQ.png" alt="enter image description here"></a>  </p>

<p><a href="https://i.stack.imgur.com/XitiM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XitiM.png" alt="enter image description here"></a></p>