1

I have a local Angular4 application that's trying to post to a local django server. The problem is that I'm getting an error in the http.post(), but I don't think it's caused by an issue with the CORS (I'm managing to consume this api using an android app, and I don't see any error message in the Angular-app about the Access-Control-Allow-Origin). Please find below my code:

// get token from the server
const body = {
    username: 'username',
    password: 'password'
};
this.http.post('http://website.loc/api/auth/login/', body).subscribe(
    res => {
        console.log('res:' + res);
    },
    (err: HttpErrorResponse) => {
        console.log('err');
        console.dir(err);
    }
);

Here is the error I'm getting (it seems that it's not able to read the url):

{headers: Object, status: 0, statusText: "Unknown Error", url: null, ok: false, name: "HttpErrorResponse", message: "Http failure response for (unknown url): 0 Unknown Error", error: ProgressEvent error}

Any clue what might cause these kind of issues?

Hakim
  • 3,225
  • 5
  • 37
  • 75
  • This is not a problem with Angular. It's error on your server. Please check that you return a valid JSON – TheUnreal Sep 24 '17 at 13:16
  • @TheUnreal My server actually returns an object ({"auth_token":"value"}. Is there a way to make Angular accept this kind of output? Otherwise what should the output look like? – Hakim Sep 24 '17 at 13:21

1 Answers1

2

You need to find actual problem, It may cross domain issue. In android, native app not using a browser, it direct call web api and cross domain comes in browser only.

To find actual problem open developer tool and see console. If you see a message like cross domain or access denied. It's issue with cross domain. You have to configure cors in server. See in network activity for server response if there are not a cors issue. You can see actual service request and failure reason in network activity. In angular cache block you can not get actual problem which from configuration.

This may also issue with calling request from https to non https url. Browser not give permission to call ajax request from https to non https url.

To fix issue you have to find actual problem by developer console tool.

Kishan Mundha
  • 2,989
  • 18
  • 26
  • In the web developer tool `console` tab in firefox, I don't see any issue with the cross-domain. I will try to configure it later on the server and see if it fixes this problem. The website isn't working over https, just plain http. – Hakim Sep 24 '17 at 14:43
  • You can try developer tool in chrome to get actual request and call same api with same params in postmen. If we get error, issue with server otherwise need to do something in angular, might be issue with intercepter if you are using – Kishan Mundha Sep 24 '17 at 15:28
  • I've managed to call the same command with `curl` from the command-line, isn't that the same? Is there a way to make Angular more verbose about the error? – Hakim Sep 24 '17 at 16:44
  • Try `fetch(url).then(res=>console.log(res)).catch(err=>console.error(err))`. If got error in console than issue with server conf or cors. – Kishan Mundha Sep 24 '17 at 16:48
  • For future visitors, it was indeed the CORS that was causing the problem (although the error wasn't really explicit). Installing the adequate plugin in `Django` (See [cors](https://stackoverflow.com/a/35761088/2228912) solved my problem. – Hakim Sep 24 '17 at 21:34