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 ?

Improve this question
8
  • 3
    It's the cross domain issue, check this: stackoverflow.com/questions/3506208/jquery-ajax-cross-domain
    – Andrew
    Commented Mar 6, 2014 at 8: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
    Commented Mar 6, 2014 at 8: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
    Commented Mar 6, 2014 at 8: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
    Commented Mar 6, 2014 at 8: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 MySecretUrl.com/login page.
    – Tommi
    Commented Mar 6, 2014 at 8:32

1 Answer 1

Reset to default
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.

Improve this answer
3
  • 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
    Commented Mar 6, 2014 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
    Commented Mar 6, 2014 at 15:23
  • Here's an example of a request using YQL learn.jquery.com/ajax/working-with-jsonp
    – Kevin B
    Commented Mar 6, 2014 at 15:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.