I am getting post response in network tab but still shows error in console

Question

I am writing a post method in angular to post some data I am returning JSON in Codeigniter.

this is service:

public userlogin(data) {
  let uploadURL = `myurl`;

  const requestOptions: Object = {
    responseType: 'json'
  }    
   return this.http.post<any>(uploadURL, data,requestOptions).pipe(map((responce) => {
    console.log(responce);
    return responce;
  })
  );
}

In my component:

this.services.postuser(formData).subscribe(
  (data) => {
    console.log(data);
  }
);

following error, I am getting in the console

and here is a screenshot to my network tab where the response is JSON

I have gone through a lot of stack overflow questions and answers but the solution is not working for me. I also changed post method response from JSON to text and response type in post method to text still receiving the same error.

backend function for post:

public function user_login()
    {
    if(is_array($_POST) && sizeof($_POST) >0){

       $where_array = array(
        'username'=>$this->input->post('username'),
        'password'=>$this->input->post('password')
        );

            $result = $this->Admin_model->checkuser($where_array);
            // print_r($result); die;
            if($result == "user not found" || $result == "incorrect password")
            {
                $json_data = array("Code"=>"1","data"=>$result);
                echo json_encode($json_data, JSON_UNESCAPED_SLASHES);

            }else{
                 $json_data = array("Code"=>"0","data" => "Login successfull");
                 echo json_encode($json_data, JSON_UNESCAPED_SLASHES);
            }
     }   
 }

Error responses can also contain a response body. This is what's happening here. — Robby Cornelissen, Jun 17 '19 at 06:41
can you please elaborate. I am pretty much confused by a lot of answers what exactly should i do — NickCoder, Jun 17 '19 at 06:43
The [official doc](https://angular.io/guide/http) has it all. Scroll down to error handling. — Robby Cornelissen, Jun 17 '19 at 06:46
as per official docs i did error handling i got error ----> Backend returned code 0, body was: [object ProgressEvent] — NickCoder, Jun 17 '19 at 06:58

score 3 · Accepted Answer · answered Jun 17 '19 at 08:22

solved by myself:

I found the issue was not about the request I was sending or the response. actually, it was a cors error because the server does not set to accept the cross-origin request.

first, I install this Firefox extension to test the problem then i got the response.

so After testing,In my ci file I set the origin to '*' to allow all origin.

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

score 0 · Answer 2 · answered Jun 17 '19 at 06:45

0

In my personal experience working with asp.net core backend (sql database) and NodeJS express backend (mongoDB)

inside Angular Front-end :

inside my services that return Observable simply return post request , like this :

return this.http.post(url, data, options);

in the component that use the service going to be like this :

this.service.postMethod(data).subscribe((res)=>{}, (err)=>{});

answered Jun 17 '19 at 06:45

Syntax

137
1
6

if you response with json , do this : JSON.stringify(res) – Syntax Jun 17 '19 at 06:47
check error that income from backend, first get error properties by using this Object.getOwnPropertyNames(); and make sure you send data object in same way your back end read it , property names have to match – Syntax Jun 17 '19 at 06:54
and options, do not send unnecessary options to your back end – Syntax Jun 17 '19 at 06:56
yes i did that and now i am getting Backend returned code 0, body was: [object ProgressEvent] – NickCoder Jun 17 '19 at 06:56
so if error happening when ProgressEvent is going on , i think something is not right when HttpClient post data to backend can you give me response code inside your back end ? – Syntax Jun 17 '19 at 07:00
yeah sure!! reposnse :- $json_data = array("data"=>$result); echo json_encode($json_data); – NickCoder Jun 17 '19 at 07:01
how your backend work with request ? please give me that part of backend code going to work with login request. I want to see how your back end see username and password – Syntax Jun 17 '19 at 07:07
personally , before send data to backend , turn them into js object like this : data = { username: 'usename', password: 'password' } – Syntax Jun 17 '19 at 07:09
i am sending formdata – NickCoder Jun 17 '19 at 07:10
It's look like your back end cannot see the username value. if formData is a form group type, add .value at the end of formData, like this: this.services.postuser(formData.value).subscribe( (data) => { console.log(data); } ); – Syntax Jun 17 '19 at 07:16
but i am getting response as shown in screenshot of network tab – NickCoder Jun 17 '19 at 07:18
yes , and response says that Code 1 , User not found – Syntax Jun 17 '19 at 07:20
that is my response set in my ci model if user not found – NickCoder Jun 17 '19 at 07:22
ok , and if i understand your question , you have the your username and password inside your database , and your back-end can not retrieve that , am i right ? – Syntax Jun 17 '19 at 07:26
no my api's are working fine and tested on postman and while using in angular form data is getting retrieved in ci and response is also sent properly. – NickCoder Jun 17 '19 at 07:30
also this is warning: zone-evergreen.js:2952 Cross-Origin Read Blocking (CORB) blocked cross-origin response "url" with MIME type application/json. See "url" for more details. but if cors are added it doesnt sent response at all – NickCoder Jun 17 '19 at 07:40
thanks to you to you clarify my error handling issues too. – NickCoder Jun 17 '19 at 10:27

score 0 · Answer 3 · answered Sep 26 '19 at 06:26

Also set content type json so it would not throw any other error just to be sure.

put below code on top of the php file:

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

For refer this answer.

I am getting post response in network tab but still shows error in console

3 Answers3