How do I set the appropriate content-type for cross domain calls using iFrame with JSON

Question

Hello All

I am trying to implement cross domain postback using iFrames and I suspect the content-type is getting skewered along the wire. This is a WCF service (which works fine) that I have tested with a normal async post and the request (in Fiddler) looked something like this

POST /RestHostService/Service.svc/?format=json HTTP/1.1 User-Agent: Fiddler Host: localhost Content-Length: 55 content-type : application/json

{"FirstName":"My FirstName","LastName":"MyLastName"}

However, when I tried the same using an iframe, the request looked like the following. As you can see the content-type and the accepts header are not "application/json"

POST /RestHostService/Service.svc/?format=json HTTP/1.1 Host: localhost Connection: keep-alive User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.33 Safari/532.0 Content-Length: 54 Cache-Control: max-age=0 Origin: http://localhost Content-Type: application/x-www-form-urlencoded Accept: application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,/;q=0.5 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

FirstName=My+First+Name&LastName=Some+random+last+name

The script which I am using is

function crossDomainSubmit(params) {

var div = document.createElement('div');
div.innerHTML = '<iframe height="250" width="250"></iframe>';
document.body.appendChild(div);

var iframe = div.firstChild;
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.open();
iframeDocument.close();

var form = iframeDocument.createElement('form');
iframeDocument.body.appendChild(form);
form.setAttribute('action', 'http://localhost/RestHostService/Service.svc/?format=json');
form.setAttribute('method', 'POST');
form.setAttribute("Content-Type", "application/json; charset=utf-8");

for (param in params) {
    var field = iframeDocument.createElement('input');
    field.setAttribute('type', 'hidden');
    field.setAttribute('name', param);
    field.setAttribute('value', params[param]);
    form.appendChild(field);
}

form.setAttribute("Connection", "close");
form.submit();

}