Why Is Fetch Query Always Returning Error Segment?

I am using the following code from react-native mobile application to make a social authentication call to dj-rest-auth local link. However I am always receiving an error. Please l

Solution 1:

the problem was that it cannot find resolvedToken Variable. so I have added on top of the code, and it works well.

var resolvedToken = "2222";
fetch(
    "http://localhost:8000/dj-rest-auth/facebook/", {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-type': 'application/json'
      },
      xsrfCookieName: "csrftoken",
      xsrfHeaderName: 'X-CSRF-Token',
      body: JSON.stringify({
        access_token: resolvedToken
      })
    }
  )
  .then(resp => resp.json())
  .then(data => {
    console.log(data);
  })
  .catch(error =>console.log(error))

Solution 2:

The error was being faced due to the usage of localhost address for django local server call here. The issue remains for localhost or 127.0.0.1 as well.

Also, next I tried using mobile hotspot with my laptop and then used the currently assigned IP address of my laptop's Wi-Fi, to run django server and place API call to it. This doesn't work if using mobile hotspot and same error is faced.

However upon using a LAN router and then using the assigned local Wi-Fi IP address of the laptop, the issue was resolved.

This has now created new issue though. The API call succeeds and i receive the token only upon the first API call or first run. Thereafter I receive the error of missing or invalid csrf token.

However since that is a new issue and is different from this question, I am currently closing this question. If I am unable to resolve the new issue, I may ask a new question.