Axios POST fails on iOS

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

Answer

Turns out this error was due to an Upgrade header apache was setting on the response. Once i unset that header in the apache config the issue was resolved on iOS. I set the following in the vhost of apache for the domain, in the directory section

Header unset Upgrade

Advertisement

Answer