Manipulating http request caused by updating img.src

Question

I am currently creating a hybrid mobile app (see phonegap/cordova) for iOS and Android and noticed when updating the img.src url of an image (which I do frequently) that the Android http request looks like below.

My problem is that it doesn't include the all important Accept header (Accept: /) so the server fails to load the image and returns (HTTP/1.1 406 Not Acceptable). Chrome/iOS include this Accept header in their http requests when updating the img.src url.

My question is, is there a way to append this header or do something that would include this header for subsequent img.src updates?

Android Http Request:

GET /system/data/ba9320b8-e093-47a9-8858-c6343febf3ec/frame?t=1339017043002 HTTP/1.1
Host: MyHostName
Connection: keep-alive
User-Agent: Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F)
AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Accept-Encoding: gzip,deflate
Accept-Language: en-US
Accept-Charset: utf-8, iso-8859-1, utf-16, *;q=0.7
Cookie: auth_token=0882f24f-04d7-4f05-9475-cfe2a94af5bf

Answer 1

Take a look at the Google implementation to handle compatibility issues for all such problems. This is from inside the Closure Library, which is compatible with PhoneGap(at least so they say:)

Basically what you need to do is to alter the headers of the http request. A native xhr object has a method called setRequestHeader(param, value); which does what you are looking for. Use remote debugging on Android to see what headers got sent and where.

I don't know what library you are using. The Google Closure Library let's you pass request headers as an object parameter to the send method of an xhr instance(SEE THIS), so it's pretty easy. As far as I know, jQuery has a similar behavior as well.

$.ajax({
         url: "http://someurl",
         data: { signature: authHeader },
         type: "GET",
         beforeSend: function(xhr){xhr.setRequestHeader('X-Test-Header', 'test-value');}
         success: function() { alert('Success!' + authHeader); }
      });