Connect to webService using AJAX and CORS

Question

I'm developing a phonegap App with html5, css, js and jQuery Mobile and I need to connect to a webservice which is already done and fully working. The problem is the Access Control Allow Origin and the Cross Domain. As if it wasn't hard enough I have to think about the authentication too, essential to connect to the web service. I already done my research, read a lot of tuts, tried a lot of solutions, some of them using jsonP which looked to me the closest one to work. The thing is I'm new at this and no tutorial looked good, so hopefully someone here could lead me the way. The webService was build in asp.net and I have full access to it if it's needed. I'm using AJAX to make the "call" but I can't pass the ForeFront authentication .

Here's the JS+AJAX code:

function conteudoProg() {
    var webMethod = "myURL";
    var credentials = {
      username : "myUser",
      password : "myPass"
  };

$.ajax({
    type : "GET",
    url : webMethod,
    //data: credentials,
    contentType : "application/json; charset=utf-8",
    dataType : "jsonp",
    success : function(msg) {
        alert(msg);
    },
    error : function(e) {
        alert(e.status + " " + e.statusText );
    }
});
}

If I change my dataType from jsonp to json, I get this error:

OPTIONS https://myURL 440 (Login Timeout) 
XMLHttpRequest cannot load https://myURL Origin http://127.0.0.1:8020 is not allowed by Access-Control-Allow-Origin.

With jsonp, the error looks like this:

Resource interpreted as Script but transferred with MIME type text/html: "https://myURL/CookieAuth.dll?GetLogon?curl=Z2FWSInqueritosZ2FServ…1820135927463_1359737732559Z26_Z3D1359737732605&reason=0&formdir=3". jquery-1.8.2.min.js:2
Uncaught SyntaxError: Unexpected token <

From the looks of your jsonp error it seems that the server does not respond as you expect it (with a json string) but with a text/html page. Can you produce sample output from the service you are calling? — mihaimm, Feb 01 '13 at 17:03
It's not responding with json because the request is redirected to CookieAuth.dll (which is html) to authenticate and that's the missing part... — ruitex23, Feb 05 '13 at 14:50

score 0 · Answer 1 · edited May 23 '17 at 12:04

Requests to another domain will cause a pre-flight OPTIONS request to see whether the requesting domain can make calls to this domain.

The receiving end needs to emit the correct headers or your browser will block the request and give you the error you posted.

Say you are requesting from mydomain.com to webservice.com

Then webservice.com/api should emit these headers:

Access-Control-Allow-Origin: http[s]://mydomain.com
Access-Control-Allow-Credentials: true                      # if you want cookies
Access-Control-Allow-Headers: Content-Type, X-Custom-Header # any extra headers you want to send

Make sure the webservice knows about OPTIONS requests. It really only needs to emit some CORS headers, it doesn't need to do anything else (like process a request to it's API).

You don't need to change anything in your AJAX handler, it will pass as any other request. If you want cookies make sure to set http_request.withCredentials = true;

Keep in mind that an HTTPS URL is considered to be different from an HTTP domain and make sure your HTTPS certificate is valid, if it's not valid the request may fail silently. If you're using a self-signed certificate (for testing) add it to your browser or OS whitelist. Cross domain request from HTTP to HTTPS aborts immediately

As for compatibility. Earlier versions of Internet Explorer (8 and lower) use ActiveXObject, this API is very bad at CORS. It doesn't support authentication/cookies or custom headers (such as Content-Type: application/JSON). I would recommend a JSONp fallback.

mihaimm · Answer 2 · 2013-02-07T11:54:47.497

0

The code does not work because when you tell jQuery that the .ajax method expects a dataType json, that's what's trying to parse the response into. If the response is html then you should use a dataType html (or none, to let the default intelligent guess do it's work). See jQuery.ajax() dataType for more info.

edited Feb 07 '13 at 11:54

answered Feb 01 '13 at 17:03

mihaimm

521
2
6

Connect to webService using AJAX and CORS

2 Answers2