React Native + Django DRF network error on POST

Question

I'm developing a React Native app. As a backend I'm using DJango DRF. I'm trying to make POST request for creating a new element on backend, this is my code in React:

**API.JS**
const routes = {
  accounts: {
    get: () =>
      requestHelper({
        method: "get",
        url: "accounts/",
      }),
    post: (data) =>
      requestHelper({
        data,
        method: "post",
        url: "accounts/",
      }),
  },
};

**API CALL**
const formData = new FormData();

const image = {
  uri: data.image,
  name: data.timestamp + ".jpg",
  type: "image/jpeg",
};

_.map(data, (item, name) => {
   formData.append(name, item);
});
    
formData.append("image", image);

await api.accounts
    .post(formData)
    .then((res) => {
      console.log(res, "OK");
    })
    .catch((err) => {
      console.log(err);
    });
};

Te request is reaching backend and the new Account is being created on database (including the image). The problem is that,despite that Django is returning 200_OK, the api call is going to the catch statement, and this error appears on console:

Network Error

Stack trace: node_modules/axios/lib/core/createError.js:15:0 in node_modules/axios/lib/adapters/xhr.js:81:4 in dispatchXhrRequest
node_modules/event-target-shim/dist/event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
node_modules/react-native/Libraries/Network/XMLHttpRequest.js:575:10 in setReadyState
node_modules/react-native/Libraries/Network/XMLHttpRequest.js:389:6 in __didCompleteResponse node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:189:10 in emit
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:425:19 in __callFunction
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:6 in __guard$argument_0
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:4 in callFunctionReturnFlushedQueue [native code]:null in callFunctionReturnFlushedQueue

I think is not an Image problem, because I've removed for testing and same error appears.

pplonski pplonski · Accepted Answer · 2020-11-04T15:36:16

Usually, you get the Network Error when the REST API server can't be reached. Have you set the correct baseURL or proxy to the Django server? Django server is probably running on 8000 and React is running by default on 3000.

The fact that you see a request on the server-side is a little strange. It will suggest that there might be a bug/problem in the code that is used to process a successful response. Have you tried to remove that code? Yes, might sound strange, just remove the console.log(res, "OK"); and see what will happen?

React Native + Django DRF network error on POST

1 Answers