Angular HTTP post not accepting JSON response?

Question

I created an API in laravel and tested in postman and it is working perfect. But when I try it from angular it works fine for returning a string text but not for JSON response

I searched it on internet and found setting content-type:application/json and tried with different ways for setting content type in header but issue still persist

    var obj = JSON.parse('{"email":"ab@gm.com","password":"12345678"}');
    //1st type of header
    var headers_object = new HttpHeaders().set('Content-Type', 
    'application/json');

     const httpOptions = {
         headers: headers_object
     };

    //2nd type of header
        var HTTPOptions = {
            headers: new HttpHeaders({
               'Accept':'application/json',
               'Content-Type': 'application/json'
            }),
            'responseType': 'application/json' as 'json'
         }

        return this.http.post<any>(`http://127.0.0.1:8000/api/auth/login`, obj,HTTPOptions ).subscribe(resp => {
            console.log(resp);    
        });

Postman Output

browser network request/response

score 0 · Answer 1 · answered Sep 17 '19 at 11:31

0

return this.http.post(http://127.0.0.1:8000/api/auth/login, obj,HTTPOptions ).map((resp: Response) => resp.json())

hopefully this will work

answered Sep 17 '19 at 11:31

Irfan Haider Khan

1
1

map or subscribe both hits the api but nothing returns in response – imabdullah Sep 17 '19 at 12:05

score 0 · Answer 2 · answered Sep 17 '19 at 11:41

0

Basically, you are sending "string JSON" instead JSON Object, send Javascript Object directly instead of string will solve your issue,

Use the below-mentioned way to post JSON data to the server,

var httpOptions = {
    headers: new HttpHeaders({
        'Accept':'application/json',
        'Content-Type': 'application/json'
    })
};

var dataToPost = {"email":"ab@gm.com","password":"12345678"}; 

this.http.post('http://127.0.0.1:8000/api/auth/login', dataToPost, httpOptions)
.subscribe(resp => {
    console.log(resp);    
});

answered Sep 17 '19 at 11:41

Arsal Imam

2,882
2
24
35

I tried but it is not working. still same response. When I return a simple string from api it works fine but not for JSON. – imabdullah Sep 17 '19 at 12:03
then check your console, it should show error of CORS – Arsal Imam Sep 17 '19 at 12:45
nope, I already fixed that. even its the issue of CORS then the return string should also not work – imabdullah Sep 17 '19 at 17:55
chrome generates 2 entries in network tab for every single XHR, check the second request... – Arsal Imam Sep 18 '19 at 05:38

score 0 · Accepted Answer · answered Sep 23 '19 at 05:29

It was due to CORB.

Cross-Origin Read Blocking (CORB) is an algorithm that can identify and block dubious cross-origin resource loads in web browsers before they reach the web page. CORB reduces the risk of leaking sensitive data by keeping it further from cross-origin web pages.

https://www.chromestatus.com/feature/5629709824032768

Solution run chrome in disabled web security mode. This worked for me https://stackoverflow.com/a/42086521/6687186

Win+R and paste

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

But if I able to work when development, in production it will behave the same isnt it? Or is it (CORS) only occur in development?? — Sandeep Thomas, Apr 21 '20 at 15:36

Angular HTTP post not accepting JSON response?

3 Answers3