2

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 ?

KapteinMarshall
  • 480
  • 6
  • 19
  • 3
    It's the cross domain issue, check this: http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain – Andrew Mar 06 '14 at 08:18
  • 2
    If the web service is on a different domain, you need a proxy for this. The proxy runs on your server and calls the service for you. – Krisztián Balla Mar 06 '14 at 08:18
  • Do you use "block" word properly? Your ajax set to `async: true` so it should not block page. Did you mean you get error instead of success fired? – Tommi Mar 06 '14 at 08:25
  • Very good point. See my ambiguity there. I get an error instead of a success, but as far as I can tell, the call is correct. – KapteinMarshall Mar 06 '14 at 08:29
  • So Andrew is most likely right, you do cross-domain post. You can't use jsonp here, but you can send `Access-Control-Allow-Origin: yourclientsite.com` header from https://MySecretUrl.com/login page. – Tommi Mar 06 '14 at 08:32
  • @smit How is this related? – Tommi Mar 06 '14 at 08:36
  • Hi Guys. I am still a bit stuck with this issue. I am a bit unsure what you guys mean with Access-Control-Allow-Origin: yourclientsite.com The thing is this post might be to a webservice that I cannot change. As a few of the other calls will be. I was thinking now. Will it make a difference if I implement a http post ? I have never done a normal http post, but cannot be to hard to do ? – KapteinMarshall Mar 06 '14 at 14:24
  • I should probably mention that the request never gets made. I used fiddler to take a look at the call. No call is even being made to the webservice. It fails before even making the call – KapteinMarshall Mar 06 '14 at 14:37

1 Answers1

1

Is there any fix that does not require the webservice to be changed ?

No. If changing the webservice isn't an option, your only option is to not use the browser to make this request.

You must either make the server return the data in a format that can be accepted cross-domain, or don't make cross-domain requests with the browser.

Kevin B
  • 92,700
  • 15
  • 158
  • 170
  • Hey thanks for your reply. Hopefully I can convince the senior developer here to change some webservices... :) You seem to know a lot about all this. How would I go about not using the browser to do the webservice calls ? Since our senior developer does not want any asp used for the website. – KapteinMarshall Mar 06 '14 at 15:22
  • You would have send a request to an asp page on the same domain as the web page that then requests data from the service. If that isn't an option, there are public proxy services you can use such as YQL. – Kevin B Mar 06 '14 at 15:23
  • Here's an example of a request using YQL http://learn.jquery.com/ajax/working-with-jsonp/ – Kevin B Mar 06 '14 at 15:25