Retrieving data from a server using the GET method with parameters through axios in a React Native application

As someone new to Web requests, I have encountered a challenge that seems simple but has proven difficult for me. Despite searching the web, I am struggling to get a working response.

When I input the URL 'http://www.test.com/callservice.php?action=stop&x=1&y=2&ct=100' into my browser, I receive a JSON response from a particular site.

Now, I am attempting to achieve the same outcome using Axios in Javascript.

My initial attempts involve direct use of the URL:

 componentWillMount() {
    axios.get('http://www.test.com/callservice.php?action=stop&x=1&y=2&ct=100')
      .then(response => console.log(response));
  }

Alternatively, I have tried incorporating 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));
  }

Unfortunately, both avenues result in the same error message:

Possible Unhandled Promise Rejection (id: 0):
Network Error
Error: Network Error

A more detailed error explanation is provided upon further investigation:

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)

Answer №1

Hello jbssm, I noticed that you are currently developing for IOS. Have you had the chance to review your App Transport Security Settings within your Project Settings in Xcode?

Xcode typically disables HTTP connection by default, only permitting secure connections. It may be necessary to add "Allow Arbitrary Loads" to your Project Settings in order to enable HTTP connections.

Answer №2

It appears that the problem is related to a CORS issue.

If you have control over the server-side script, you can resolve this by adding the appropriate response header. In PHP, it would look something like this:

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

If you need a temporary solution for testing purposes (or if you don't have access to the server), you can try installing a Chrome extension that disables cross-domain restrictions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with MiniCssExtractPlugin during compilation of the entry point build

We have integrated webpack into our deployment process to bundle resources efficiently. However, we are now facing a challenge as we aim to include the bundling of sass files through webpack in order to streamline our build process. The MiniCssExtractPlugi ...

Incorporating a React element into a JavaScript object's property: A comprehensive guide

Below is a React Element named Info that has been attached to a Javascript object named myObj: let Info = ( <Info type="green" /> ); let myObj = { ReactComp: Info }; Now, the goal is to render the Info component using the above myObj objec ...

When using JsonConvert.DeserializeObject from Newtonsoft.Json, the issue of losing a non-printable ASCII character (specifically the group separator) during deserialization may

I have encountered a puzzling issue that I am struggling to resolve. My current task involves deserializing JSON data using Newtonsoft.Json. After inspecting the raw JSON string, I noticed certain character sequences: { '\\', 'u&ap ...

Unable to figure out why information is not being transferred to an array through Mongoose

Seeking assistance as I am unable to figure out how to place a set of information into an array named "teamDetails". Here is the relevant /post item from server.js: app.post('/create', (req, res) => { console.log('Post command receiv ...

Make sure to use jQuery waterfall 'reflow' only once all the images have finished loading

Currently, I am utilizing jQuery waterfall to achieve a grid-style display on my website. To address the issue of images overlapping, I have enclosed the waterfall method within a .load() function like this: $(window).load(function(){ $('#buildcon ...

Storing information in an array with automatic ID generation_incrementing

Here is an array in a specific format, however, there is no "ID" field available when the form is submitted. The requirement is to have an auto-generated ID assigned and saved in a JSON Array upon user submission of the form. With each form submission, t ...

php send back a JSON containing an error message using AngularJS

I am a beginner with PHP and AngularJS, I have written some PHP code that can return JSON data in the following format: {id:10, sessionName:99, computer:99, quality:LAN(very fast), networkAuthentication:Disable,…} {id:13, sessionName:55, computer:55, q ...

Tips on sending arguments to functions associated with ...mapActions...()?

After analyzing the passage below export default { methods: { ...mapActions(["updateData", "resetData"]); } } I wanted to include a parameter in the called functions. Unsure of the proper way to do this while still using the ...mapAction() call, ...

Implementing Partial Updates (PATCH) in a Restful Web API Server using .NET, JSON, and EF6

I've been delving into a Web API project (Restful) that involves working with large models and tables, making Partial Updates a necessity. Exploring the option of POSTing to a subset of the model doesn't seem practical due to the sheer number of ...

Google Bar Graphs Cannot Display Decimal Values

Having an issue with my bar chart from Google Chart not displaying float numbers. Other types of bar charts provided by Google Chart work fine, but this specific type doesn't show the float numbers. Here is the code I have written: http://jsfiddle.ne ...

Alternative to Webpack for modifying global variables in preloaded modules

Is there a way to shim moment.js in webpack similar to how it is done in browserify? I have developed a widget using npm and webpack, which will be included in another application. The other app already has moment.js loaded via a script tag. I want to av ...

Swift - JSON decoding error: "Was supposed to decode an array of any type, but instead found a dictionary."

Hello there! I have a question here that's at the root of my learning journey. I'm delving into SwiftUI and currently experimenting with data fetching from an API to store it in an array. At the moment, I have two essential files in place: First ...

The value of the checkbox model in AngularJS is not defined

I'm encountering an issue where I am trying to send the value of a checkbox from my model to the server. Since the checkbox has not been interacted with on the form, Angular does not assign it a value and returns undefined when I request the value. B ...

Confused between Javascript and PHP? Here's what you should consider!

Looking for a solution to transfer a string from JavaScript, obtained from the content of a div, to PHP in order to create a text file with this information. What would be the most effective approach to accomplish this task? Edit[1]: Using the Post ...

The proper method for retrieving FormData using SyntheticEvent

I recently implemented a solution to submit form data using React forms with the onSubmit event handler. I passed the SyntheticBaseEvent object to a function called handleSubmit where I manually extracted its values. I have identified the specific data I n ...

acquiring the main class instance within a function without relying on an arrow function

Within my Angular project, I have integrated a datatable with row grouping and row callbacks. Datatable Options openPositionDatatableOptions = { sDom: 'rt<"bottom"p>', ajax: (data, callback, settings) => { this.service.ge ...

Prevent global CSS from being overridden in a production environment for a React Next.js application

Being new to REACT-NEXT and coming from an Angular background, I am struggling with fixing this issue. Here is the element I am using from another resource: import example-custom-ele-parent, {example-custom-ele-child} from 'custom-tags/example-custom& ...

How can Selenium interact with various shadow DOM elements within a dropdown menu?

I am attempting to interact with a dropdown menu in order to track activity on the page when clicking on one of its items. Here is an overview of my HTML structure: <slot> #shadowroot <myoption-cmp> #shadowroot <some anchor te ...

Exploring the possibilities: Establishing a Connection between Node.js and MySQL

I encountered an issue while attempting to connect node.js to MySQL. Despite having installed MySQL and the necessary libraries, I am unable to establish a connection. How can I troubleshoot this error? Additionally, what is the best approach for retrievin ...

Python: using the json built-in to encode any type of object

Currently, I am in the process of developing a web application with a Tornado backend and utilizing JavaScript and jQuery on the frontend. To serialize objects for the frontend, I initially planned to create a custom JSONEncoder for my classes. However, I ...