I am trying to do a simple ajax POST from domain1 to domain2 using Axios. This is a cross domain simple POST so there is no PREFLIGHT (OPTIONS) call. The response from the application is a simple JSON string.
On Chrome, on Android, Windows and iOS (excluding iPhone) this works fine. But on iPhone 6,7,8+ on both Safari and Chrome i get an error in the console from the axios response.I can see the POST request get to the application on domain2 and a json response is sent. But this is what is shown when i console.log the response in the axios.catch. There are no other details.
Error: Network Error
My POST is a multipart/form-data post with the following 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
And the form data is simply 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--
When the POST is sent from Chrome, (or IE and Firefox) on Windows and Mac I get the following response headers and a HTTP 200:
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
which i have explicitly set on the application of domain2 (Laravel 5.8 application - CORS headers set in middleware).
But on iPhone, both Safari and Chrome (and on Safari browser on a Mac - Chrome works on Mac) I do not see any response - the conole.log(error) shows (see axios code below)
Error: Network Error
And in the network tab looking at the request/response there are no response headers returned and no HTTP status code. Only the request headers are shown.
My axios code is the following:
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");
});
The formData is created using formData.append('a',12345) etc...
I can successfully POST to a test upload from https://domain1 to https://domain1 using the same axios code, so i believe there are some issues with the response headers from domain2 that iOS does not like and kills the response.
I've tried setting/changing all response headers, setting headers on the Axios POST, tried using simple xhr instead of Axios etc but to no avail...same error.
Anyone any pointers? I;ve googled etc... but have not found anything that helps. Even how i could get more information from the Error response on iPhone? I am debugging the iPhone on a Mac so can see the console.log etc...
Many thanks
