Angular注册组件出现JSON.parse错误，Postman测试正常求排查

问题描述 #

在Angular注册组件中完成新用户注册操作时，始终触发JSON.parse错误，但使用Postman测试该接口功能正常，无法定位JSON格式异常的原因。

相关代码 #

Angular注册组件代码（register.component.ts） #

this.user = this.forma.value;
this._userService.signup(this.user).subscribe(
{
  next: (response) =>
  {
    console.log(response);
    console.log(this.forma);

    if(response.status == "success")
    {
      this.status = response.status;
      this.forma.reset();
    }
    else 
    {
      this.status = 'error';
      console.log("error status", this.status);
      
    }
    
    },
    error: (error) =>
    {
      console.log(<any>error);
    }

  });

Angular用户服务代码（user.service.ts） #

signup(user, gettoken = null):Observable<any>
{
    if(gettoken != null)
    {
      user.gettoken = 'true';
    }

    let json = JSON.stringify(user);
    let params = 'json='+json; 
    console.log(params);
    let headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');
    return this._http.post(this.url+'login', params, {headers:headers});     
}

Laravel后端login方法代码 #

public function login(Request $request)
{

    $jwtAuth = new \JwtAuth();

    // recibir datos por post
    $json = $request->input('json', null);
    $params = json_decode($json);
    $params_array = json_decode($json, true);
    var_dump($params_array);


    // validar esos datos
    $validate = \Validator::make($params_array, [

        'email'   =>    'required|email',  
        'password'=>    'required'
    ]);

    if($validate->fails())
    {
        $signup = array(

            'status' => 'error',
            'code' => 404,
            'message' => 'el usuario no se ha podido identificar',
            'errors' =>$validate->errors()
        );
    
        
    }
    else
    {
        // cifrar la password
        $pwd = hash('sha256', $params->password);

         // devolver token o datos
         $signup =  $jwtAuth->signup($params->email, $pwd);

         if(!empty($params->gettoken))
         {
            $signup =  $jwtAuth->signup($params->email, $pwd, true);

         }

    }

    return response()->json($signup, 200);

}

关键异常点 #

返回的响应示例中包含PHP调试输出内容，破坏了JSON格式：

{
  "error": {},
  "text": "array(2) {\n  [\"email\"]=>\n  string(17) \"marta@example.com\"\n  [\"password\"]=>\n  string(8) \"password\"\n}\n\"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUsImVtYWlsIjoibWFydGFAZXhhbXBsZS5jb20iLCJuYW1lIjoibWFydGEiLCJzdXJuYW1lIjoibWVqaWEiLCJpYXQiOjE2NzM4NjIxODgsImV4cCI6MTY3NDQ2Njk4OH0.aGIE_5peskBjbTSA3GSaHJukq0yL_EpSaOIMOE8JUzg\""
}

解决方案 #

问题根源在于Laravel后端代码中的var_dump($params_array);语句——该调试语句会在返回JSON响应之前输出额外的PHP数组内容，导致整个响应体不是纯JSON格式，Angular的HttpClient尝试解析时就会触发JSON.parse错误。

只需删除该var_dump语句，确保后端返回的响应是纯净的JSON内容即可：

public function login(Request $request)
{

    $jwtAuth = new \JwtAuth();

    // recibir datos por post
    $json = $request->input('json', null);
    $params = json_decode($json);
    $params_array = json_decode($json, true);
    // 移除var_dump调试语句


    // validar esos datos
    $validate = \Validator::make($params_array, [

        'email'   =>    'required|email',  
        'password'=>    'required'
    ]);

    if($validate->fails())
    {
        $signup = array(

            'status' => 'error',
            'code' => 404,
            'message' => 'el usuario no se ha podido identificar',
            'errors' =>$validate->errors()
        );
    
        
    }
    else
    {
        // cifrar la password
        $pwd = hash('sha256', $params->password);

         // devolver token o datos
         $signup =  $jwtAuth->signup($params->email, $pwd);

         if(!empty($params->gettoken))
         {
            $signup =  $jwtAuth->signup($params->email, $pwd, true);

         }

    }

    return response()->json($signup, 200);

}

内容的提问来源于stack exchange，提问作者Rafael Hernández