Failed Axios POST request on iOS devices

Attempting a straightforward ajax POST from domain1 to domain2 using Axios. This involves a cross-domain simple POST without requiring a PREFLIGHT (OPTIONS) call. The response returned by the application is a basic JSON string.

This process functions smoothly on Chrome, Android, Windows, and iOS devices excluding iPhone. However, when attempting the same on iPhone 6, 7, 8+ with Safari or Chrome browsers, an error appears in the console from the axios response. Upon inspecting, it's evident that the POST request successfully reaches the domain2 application, generates a JSON response, but only displays the following error message upon console.log within the axios.catch block with no additional details:

Error: Network Error

The POST structure consists of multipart/form-data along with these Request headers:

Accept: application/json, text/plain, */*
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary81kouhSK7WgyVQZ3
Origin: https://domain1
Referer: https://domain1/test
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

The form data simply contains 4 text fields:

------WebKitFormBoundary81kouhSK7WgyVQZ3
Content-Disposition: form-data; name="a"
12345
------WebKitFormBoundary81kouhSK7WgyVQZ3
Content-Disposition: form-data; name="b"
asdfasf
------WebKitFormBoundary81kouhSK7WgyVQZ3
Content-Disposition: form-data; name="c"
asdfadsf
------WebKitFormBoundary81kouhSK7WgyVQZ3
Content-Disposition: form-data; name="d"
adfasdfa
------WebKitFormBoundary81kouhSK7WgyVQZ3--

Upon successful posting from Chrome (or IE/Firefox) on Windows or Mac, the response headers received include HTTP 200 status as follows:

access-control-allow-headers: Accept,Content-Type,Origin,Referer,User-Agent
access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS
access-control-allow-origin: *
cache-control: no-cache, private
content-type: application/json, text/plain, */*; charset=UTF-8
x-content-type-options: nosniff
x-ratelimit-limit: 60
x-ratelimit-remaining: 59
x-xss-protection: 1

Although I've explicitly set these headers on the domain2 application (Laravel 5.8 - CORS headers configured in middleware), encountering an issue specifically on Safari and Chrome browsers on iPhones where no response seems to be received. The error logged on these occasions remains consistent:

Error: Network Error

On analyzing the network tab for request/response, absence of response headers along with any HTTP status code gets displayed exclusively. Only the request headers are visible.

The axios code implemented looks like this:

axios.post('https://domain2/test', formData)           
    .then(function (response) {

        console.log("POST function of axios 1");
        console.log(response);
        console.log("POST function of axios 2");
    })
    .catch(function (error) {
        console.log("Error in catch of axios post");
        console.log(error);
        console.log("End error");
    });

formData creation entails appending 'a', 'b', etc. values to the form. Successfully POSTing from a test upload at to works seamlessly utilizing the same axios script. Thus, leading to speculations regarding potential issues with response headers originating from domain2 which may not align with iOS standards causing termination of responses.

Various attempts have been made to tackle this concern including modifications to response headers, adjusting headers during Axios POST, experimenting with simple xhr instead of Axios, amongst others but unfortunately, results remain consistent displaying the mentioned error.

If anyone has insights into resolving this issue or suggestions on how to extract more insightful information from the Error response on iPhones, your input would be greatly appreciated. Extensive research via Google and other resources hasn't provided a solution yet. Even methods of extracting further debug information from iPhone consoles while debugging through a Mac would be immensely helpful.

Thank you!

Answer №1

It was discovered that the cause of this error was actually related to the Upgrade header that apache was including in the response. By removing this header from the apache configuration, the problem was successfully resolved on iOS. I added the following line to the vhost configuration for the specific domain, within the directory section:

Header unset Upgrade

Answer №2

After adding the API domain to my info.plist, my issue was resolved:

  1. First, open Xcode

  2. Next, select your target

  3. Navigate to the info tab (info.plist)

  4. Locate the App Transport Security Settings section

  5. Add a new field under it named Exception Domains (if it's not already there)

  6. Within Exception Domains, add a new field named

    YOUR_API_DOMAIN, for example: example.com

  7. Set the type of this field to Dictionary

  8. Add another field under your domain name and name it

    NSExceptionAllowsInsecureHTTPLoads

  9. Change its type to Boolean and set its value to 1 (select Yes)

  10. Close the Metro bundler terminal and rebuild your application

For visual reference, refer to this screenshot:

https://i.sstatic.net/WUYFv.png

Answer №3

Are the mobile device and server connected to the same network? Instead of using https://domain2, try using the server's local network IP and port. You can replace the example IP with the server's IP address and port provided below.

axios.post('http://10.0.0.12:8000/', formData)

It's possible that the mobile device is encountering an error because it cannot resolve the URL https://domain1?

Also, if you are using the server's IP address, try removing the 'https' from the URL. Check out this link for more information: Ensure that OPTIONS is enabled in your server's CORS settings.

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

Encountering an unforeseen issue with the config.kit.methodOverride while executing Svelte

While working on a Svelte project, I recently updated it to the latest version using the migration tools provided. However, now the project doesn't seem to interact with npm as expected. When I run npm i, it installs the node modules but throws an er ...

Model in Laravel for custom query field

I have a Model named Post in my database with fields like "views" and "likes". I want to include a custom field in my SELECT query called "reactions" which would calculate the sum of "views" and "likes". I cannot use Attributes as it would not allow me to ...

Is there a way to retrieve the value of an HTML variable using Selenium?

Seeking assistance in determining the progress value of a video using Selenium. I understand that I need to utilize JavaScript executor, but have been unsuccessful in finding a solution so far. The element in question is: <div aria-label="scrub bar" a ...

How can I retrieve the array data that was sent as a Promise?

I have a database backend connected to mongoDB using mongoose. There is a controller that sends user data in a specific format: const db = require("../../auth/models"); const User = db.user const addProduct = (req, res) => { User.findOne({ ...

Unexpected error from API call detected within Mint localhost Template Kits elements

Hello Everyone, hope you're all having a good day! Recently, I installed the Elementor and Envato Elements plugins on my localhost Linux Mint WordPress setup. After configuring permalinks and other settings in WordPress, I proceeded to browse Templat ...

including a close button when in use and excluding it when not in use

Seeking assistance with removing the "close" icon if it is not active. Here is the code I currently have $("#mason2 li div").click(function() { $(this).parent().hide().appendTo("#mason2").fadeIn(200); $(this).append('<p class="close"& ...

Using jQuery Mobile: Implementing listview data-filter for multiple data sets

I'm working on a JQM page with two data-role="listview" elements. Both of them are using the same data set, but one listview displays only text while the other includes icons as well. My goal is to implement the data-filter="true" option for both lis ...

Steps to include a jQuery reference in a JavaScript file

I'm looking to create an external JavaScript file with validation functions and incorporate jQuery into it. Can anyone provide guidance on how to accomplish this? I attempted the code below, but unfortunately, it doesn't seem to be functioning c ...

"Create a notification pop-up in CSS that appears when a link is clicked, similar to

I am looking to create a model page that functions similarly to the inbox popup on Stack Overflow. When we click on the inbox icon, a small box appears with a tiny loader indicating messages or comments. The box then expands depending on the content inside ...

Challenges with line height in IE when adjusting font size in textarea

I'm facing an issue with adjusting the font size in a textarea using JavaScript. While it works perfectly in Firefox, there are some problems in IE. Specifically, the line-height does not change accordingly. This results in gaps between lines when the ...

Storing an empty string in a Laravel database: A step-by-step guide

Below is the code snippet from my controller: public function addEmployer(Request $request) { $validator = UserValidations::validateEmployer($request->all()); if ($validator->fails()) { return response(['status' => false ...

The JSON response is being tampered with by an unidentified entity while traveling between a PHP Laravel application hosted on an Nginx server and

After making an API call to the server, I noticed that the JSON response was being altered with some additional JSON at the beginning. This is causing the response to be invalid JSON and resulting in the API call failing during the decoding process. While ...

Exploring the integration of PostgreSQL into JavaScript

As a beginner in JavaScript, I am looking to create a web page that can store data in a database. Can anyone provide guidance on what resources or materials I should study to learn more about this process? ...

Using spin.js instead of an animated gif provides a sleek and modern alternative for adding loading

Seeking guidance as a newcomer to JQuery. A form "processing" div should appear after form submission. Currently, using a basic div with an animated gif for visual feedback: <div id="loading">Please wait, your news is being submitted... <img src= ...

Connect the jQuery UI droppable feature to the Lift ajax handler

I'm currently developing a web application using Scala / Lift and I want to enhance user experience by adding drag and drop functionality. However, I am unsure how to integrate jQuery with Lift for this purpose. At the moment, I have a draggable div ...

Obtain information using AJAX calls with jQuery Flot

Having an issue with jQuery Flot that I need help resolving. PHP output (not in JSON format): [[1, 153], [2, 513], [3, 644]] ~~ [[1, 1553], [2, 1903], [3, 2680]] Here is the jQuery call: $.ajax({ url: 'xxx.php', success: function (dat ...

Using Socket.io within express routes

Can I incorporate socket.io into an express route? This is how I envision it: Server app.js: app.get('/cool_page/', users.cool_page); users.cool_page: if (5 > 3) { socket.emit('first_connection', "true statement"); } Clien ...

How can I use JavaScript or JQuery to retrieve the HTML content as a string from a specific URL?

How can I extract the URL of a link from a webpage and add it to my code without an ID for that specific link? Is there a way to search based on the content within the <a> tag? ...

An alternative solution for supporting Edge Chromium is utilizing synchronous AJAX requests within the beforeunload event

While attempting a synchronous ajax request during the beforeunload event, I encountered an error stating that synchronous ajax requests are not supported in chromium browsers during page unload events. I am seeking alternatives for making a synchronous a ...

Transferring SetState from a parent component to a child component in React Native

When working with React js, passing setState from parent components to child components is done like this. However, in React Native setABC is undefined. What is the recommended approach for achieving similar functionality in React Native? Parent.js: funct ...