javascript - Unable to make API calls using react-native - Stack Overflow

admin管理员组

文章数量:1392088

I have a VM running locally that's built using Vagrant. I am able to curl and go to the URL directly from the browser. For some reason, when I make the same call in my react-native app using the fetch API, it keeps giving me the Network request failed error.

Here is a snippet of the code:

fetchData() {

  this.setState({ isLoading: true });

  var baseURL = 'https://192.168.33.33/api/session';

  console.log('URL: >>> ' + baseURL);

  fetch(baseURL)
  .then((response) => response.json())
  .then((responseData) => {
    console.log(responseData);
  })
  .catch(error => {
    console.log(error);
  })
  .done();
}

The baseURL log there returns the right URL and the error looks like so:

URL: >>> http://192.168.33.33/api/session
TypeError: Network request failed {stack: (...), message: "Network request failed"}
  message: "Network request failed"
  stack: (...)
  get stack: function () { [native code] }
  set stack: function () { [native code] }
  __proto__: Error

I thought it might've been an issue with my VM not being accessible somehow by my app, so I went ahead and deployed it to a real server and it still gave the same error.

Any ideas?

I have a VM running locally that's built using Vagrant. I am able to curl and go to the URL directly from the browser. For some reason, when I make the same call in my react-native app using the fetch API, it keeps giving me the Network request failed error.

Here is a snippet of the code:

fetchData() {

  this.setState({ isLoading: true });

  var baseURL = 'https://192.168.33.33/api/session';

  console.log('URL: >>> ' + baseURL);

  fetch(baseURL)
  .then((response) => response.json())
  .then((responseData) => {
    console.log(responseData);
  })
  .catch(error => {
    console.log(error);
  })
  .done();
}

The baseURL log there returns the right URL and the error looks like so:

URL: >>> http://192.168.33.33/api/session
TypeError: Network request failed {stack: (...), message: "Network request failed"}
  message: "Network request failed"
  stack: (...)
  get stack: function () { [native code] }
  set stack: function () { [native code] }
  __proto__: Error

I thought it might've been an issue with my VM not being accessible somehow by my app, so I went ahead and deployed it to a real server and it still gave the same error.

Any ideas?

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Jun 10, 2015 at 14:01 ROMANIA_engineer 56.8k3030 gold badges210210 silver badges205205 bronze badges asked May 26, 2015 at 5:49 Koes BongKoes Bong 1,12333 gold badges1515 silver badges2828 bronze badges 5

• does https://192.168.33.33/api/session maybe require some kind of headers on your get request? – lyjackal Commented May 26, 2015 at 6:29
• @lyjackal I don't think so, all the code does is this: d.pr/n/18BiU/3kXPWHcD – Koes Bong Commented May 26, 2015 at 14:54
• If you use the XMLHttpRequest object instead of fetch, do you get the same error? Is CORS setup correctly? – user2943490 Commented Jun 1, 2015 at 7:02
• Can you provide us with the URL of your real server so that we can possibly reproduce the error? – ljk321 Commented Jun 2, 2015 at 8:27
• Did you check the same origin policy? – Christian Commented Jun 2, 2015 at 21:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Found the problem and solved it.

The issue was caused by having self-signed certificate in the API server without a self created CA.

I could try creating my own CA and then create a certificate from that but I went ahead and got a cheap real SSL cert. That solved the issue.

I think you might be facing the same origin policy constraint.

There are many ways of workaround it.

本文标签： javascriptUnable to make API calls using reactnativeStack Overflow