Angular8: Call localhost Rest Api services

I developed my web application with Angular 8. The backend is a rest api that I developed with django rest framework and it's viewed just in the localhost. I tested it and it works fine. For example the service http://127.0.0.1:8000/api/devices gives a list of devices. It gives a good results if I test it with browser or curl command. I'm calling this service from my angular app. I executed the angular app with the command: ng serve --host 0.0.0.0 --port 4201

If I open the web application in the browser with http://127.0.0.1:4201/api/devices the service /api/devices is well called and I get the list of devices in my web page. but if I open the web application with my LAN IP address like that http://192.168.1.59:4201/api/devices, so I get HTTP 400 bad request error in my console.

And the same error is shown in django server traces: GET /api/devices/ HTTP/1.1" 400 26

After some searches in the internet I concluded that this error is frequently coming from angular app especially the proxy: my proxy config file proxy.config.json is:

{
    "/api" : {
        "target": "http://localhost:8000",
        "secure": false
  }
}

I mad other searches and I found an answer to similar question Angular 6 call localhost API and after following the angular doc https://angular.io/guide/build in "Proxying to a backend server" section then I modified my proxy config file to:

{
  "/api": {
    "target": "http://localhost:8000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

Has any one an idea what can be the main cause of the issue? and how I can fix it?