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!