Json Data Undefined Error in Angular Post

Question

Hi I am student developer in Angular. I am triying to fetch data of user with this user's token. I am taking Status Code 200. I know it means 'OK' but I am facing an error like this and I did not catch the error. I do not know what's wrong in my code line.

ERROR HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "https://localhost:44365/api/Auth/login", ok: false, …} headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} status: 200 statusText: "OK" url: "https://localhost:44365/api/Auth/login" ok: false name: "HttpErrorResponse" message: "Http failure during parsing for https://localhost:44365/api/Auth/login" error: error: SyntaxError: Unexpected token e in JSON at position 0 at JSON.parse () at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:24137:51) at .....

"text" :"eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJuYW1laWQiOiI2IiwidW5pcXVlX25hbWUiOiJhZG1pbiIsIm5iZiI6MTU3OTE4MzM1MiwiZXhwIjoxNTc5MjY5NzUyLCJpYXQiOjE1NzkxODMzNTJ9.9523aeTKL3t9COLJ1vJwlpadxeRnnLLhwBbWCmTDNU8DkmZ9zwCdjodwmYxoH06KHmUFvW0RMlna0ZKhJEid7g" proto: Object proto: HttpResponseBase

Token of User come correctly from my web api. My web api post method is below:

    [HttpPost("Login")]
    public async Task<IActionResult> Login ([FromBody] UserForLoginDto userForLoginDto)
    {
      var user = await _authRepository.Login(userForLoginDto.userLoginName,userForLoginDto.password);
        if (user==null)
        {
            return Unauthorized();
        }

       var tokenHandLer = new JwtSecurityTokenHandler();
       var key = Encoding.ASCII.GetBytes(_configuration.GetSection("AppSettings:Token").Value);

       var tokenDescriptor = new SecurityTokenDescriptor
        {
            Subject = new ClaimsIdentity(new Claim[] {
            new Claim(ClaimTypes.NameIdentifier,user.userId.ToString()),
            new Claim(ClaimTypes.Name,user.loginName)
            }),

            Expires = DateTime.Now.AddDays(1),
            SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(key), 
            SecurityAlgorithms.HmacSha512Signature)
        };

        var token = tokenHandLer.CreateToken(tokenDescriptor);
        var tokenString = tokenHandLer.WriteToken(token);
        return Ok(tokenString);
    }

The Error returns by my Service. And my service.ts is here:

import { UserLoginDto } from '../dto/userLoginDto';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { JwtHelper,tokenNotExpired } from 'angular2-jwt'; 
import { Router } from '@angular/router';
import { UserRegisterDto } from '../dto/userRegisterDto';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private apiUrl = "https://localhost:44365/api/Auth/";
  userToken: any;
  decodedUserToken: any;
  TOKEN_KEY = "token";
  aas :any;
  JwtHelper: JwtHelper = new JwtHelper(); 

  constructor(private httpClient: HttpClient, private router: Router) { }

  login(loginUser: UserLoginDto) {
    let headers = new HttpHeaders();
    headers = headers.append("Content-Type", "application/json") 
    this.httpClient.post(this.apiUrl + 'login', loginUser, {headers:headers}).subscribe(
      data => {
      this.saveToken(data);
      this.userToken = data;
      this.decodedUserToken = this.JwtHelper.decodeToken(data.toString()); 
      this.router.navigateByUrl('./home')
    })
  }}

When I call data in login method, data is undefined. Do you have an advice to me ? What should I do ?

Answer 1

The fallowing code is solved my problem.

login(loginUser: UserLoginDto) {
    let headers = new HttpHeaders();
    headers = headers.append("Content-Type", "application/json") //Http option gönder method 2

  this.httpClient.post(this.apiUrl + 'login', loginUser, {responseType: 'text'}).subscribe(data =>{
  this.saveToken(data);
  this.userToken = data;
  this.decodedUserToken=this.JwtHelper.decodeToken(data.toString());
  // this.router.navigateByUrl("./home");
  })