Response from HTTP with GET method with params using axios in React Native

Loading...

Response from HTTP with GET method with params using axios in React Native

I think this might be a very simple question but I'm new to Web requests and can get it working nor get a simple response searching the web
I have a site from which I can get a JSON response by putting this URL into the browser: http://www.test.com/callservice.php?action=stop&x=1&y=2&ct=100
This in turn gives me some JSON response.
Now, I'm trying to get the same in Javascript using Axios.
Either using the URL directly
 componentWillMount() {
    axios.get('http://www.test.com/callservice.php?action=stop&x=1&y=2&ct=100')
      .then(response => console.log(response));
  }

Or by using the GET params:
 componentWillMount() {
    axios.get('http://www.test.com/callservice.php', {
      params: {
        action: 'stop',
        x: 1,
        y: 2,
        ct=100
      }
    })
      .then(response => console.log(response));
  }

But both approaches give the same error:
Possible Unhandled Promise Rejection (id: 0):
Network Error
Error: Network Error

And a more detailed error from catching:
Error: Network Error
    at createError (createError.js:15)
    at XMLHttpRequest.handleError (xhr.js:87)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:542)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:378)
    at XMLHttpRequest.js:482
    at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
    at MessageQueue.__callFunction (MessageQueue.js:236)
    at MessageQueue.js:108
    at guard (MessageQueue.js:46)

Solutions/Answers:

Answer 1:

jbssm,
It seems you are working on IOS. Can you check your App Transport Security Settings in Project Setings with Xcode.

Xcode disable http connection as default only allows secure connection.
You should add “Allow Arbitary Loads” to your Project Settings

Answer 2:

It seems to be a CORS issue.

If you are the owner of the script (on the server), you can add the appropriated response header for handling this issue. In PHP would be something like this:

<?php
header("Access-Control-Allow-Origin: *");

For testing purposes (or if you don’t have access to the server), you can install a chrome extension which disables the cross-domain restrictions.

References

Loading...