I am a bit stuck with an issue.
I am developing a small mobile website. I am trying to call a webservice using an ajax call, but the browser keeps blocking my call. If I start up Chrome using the tags... "--allow-file-access-from-files --disable-web-security" Then the call works perfectly. I have no issues whatsoever.
Now my problem is if I host the website, the browser is going to block my ajax call and the user cannot for example login or retrieve information. I present my ajax call below...
$.ajax({
async: true,
beforeSend: function () {
},
complete: function () { },
type: 'POST',
url: 'https://MySecretUrl.com/login?format=json',
contentType: 'application/json',
dataType: 'json',
data: '{"UserId":"mySecretUserId","Password":"mysecretPassowrd"}',
success: function (resultMessage) {
if (resultMessage.WasSuccessful == true) {
alert('YAY');
} else {
alert('Semi Yay');
}
},
error: alert('OOOOPS')
});
Does anybody know a workaround for getting information from the webservice without any browser blocking the ajax call ?
Any suggestions would be greatly appreciated.
Thanks in advance for the help.
EDIT
Hi Guys, Ok so I did some more digging and discovered the following.
When the request is made with browser security, the call changes the POST to a OPTIONS. this is called a preflighted request. One workaround that I have found is if you are making a GET call, then you can use jsonp as your data type. But now my problem is that it is incompatible with POST. Is there any fix that does not require the webservice to be changed ?