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

Question

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)

try adding a catch clause to see the error: axios.get('testsite.com/pl/ite/…) .then(response => console.log(response)).catch(e => console.log(e)); — Diogo Sgrillo
– Diogo Sgrillo, Commented Dec 27, 2016 at 15:22
@DiogoSgrillo I did that and added the full error to the question, but I still can't understand what is the issue. — jbssm
– jbssm, Commented Dec 27, 2016 at 15:28
Official docs format response differently. Can you try this format? .then(function (response) { console.log(response); }) — Serg Chernata
– Serg Chernata, Commented Dec 27, 2016 at 15:37
Also, I've changed to the real URL in case it helps debugging. — jbssm
– jbssm, Commented Dec 27, 2016 at 15:40

Tolga Cagin · Accepted Answer · 2017-01-05 01:31:07Z

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

answered Jan 5, 2017 at 1:31

Tolga Cagin

113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diogo Sgrillo · Accepted Answer · 2016-12-27 16:01:51Z

0

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.

answered Dec 27, 2016 at 16:01

Diogo Sgrillo

2,7111 gold badge20 silver badges28 bronze badges

2 Comments

jbssm Over a year ago

But this works when I request the URL in the browser (Chrome or any other one I tried), what it doesn't work is in Javascript/React Native

Diogo Sgrillo Over a year ago

The majority of browsers has security restrictions when handling Ajax requests. You can disable those restrictions in Chrome with the plugin I suggested.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related