how to fix network error on Apisauce when coonecting with backend

Question

I am using API sauce to to connect to my backend, I have double checked all my paramaters are they are coming, tested with Postman as well and it all works. It just doesnt connect to the backend for whatever reason, when i console.log the result im to get. its shows

Object {
  "config": Object {
    "adapter": [Function xhrAdapter],
    "baseURL": "http://127.0.0.1:8000/api",
    "data": "{\"username\":\"adeyeanqar \",\"password\":\"Liverpool8\"}",
    "headers": Object {
      "Accept": "application/json",
      "Content-Type": "application/json",
    },
    "maxBodyLength": -1,
    "maxContentLength": -1,
    "method": "post",
    "timeout": 0,
    "transformRequest": Array [
      [Function transformRequest],
    ],
    "transformResponse": Array [
      [Function transformResponse],
    ],
    "url": "/token/",
    "validateStatus": [Function validateStatus],
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
  },
  "data": null,
  "duration": 12,
  "headers": null,
  "ok": false,
  "originalError": [Error: Network Error],
  "problem": "NETWORK_ERROR",
  "status": null,
}

This is my client

import { create } from "apisauce";

const apiClient = "http://127.0.0.1:8000/api",
});

This is the endpoint for authentication

import client from "./client";

const login = (username, password) =>
  client.post("/token/", { username, password });

export default {
  login,
};

Ordinarily it should return a token, when i console the result.

Answer 1

Check the data, I had the same problem and noticed that a variable in my data was undefined

Answer 2

Just as the error states, it's a NETWORK_ERROR. One of the following might be causing it:

1. You do not have a network connection
2. The server/backend URL is incorrect (status would be null)

In the case of the first issue, you have to connect to a good network. For the second, however, you cannot take a direct approach as a couple of things might be causing it:

1. Your PORT is wrong
2. Your localhost is correct, but you are trying to access from another device in which case you have to use the machine's IP and not the localhost IP

A simple fix for the first would be to check that the server runs on port 8000. For issue number 2, instead of using localhost(127.0.0.1), use the machine's actual network IP. It would look something similar to 10.23.54.1 or 197.24.68.100. This can be taken from your router (if connected to one) else go to your PC network settings and find it.

Answer 3

You should use cors in order to enable CORS with various options. use the following library for that: npm install cors

    var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})