0
 function authonticate() {            
      $.ajax({
        type: "POST",
    url: "http://lp18mobile.azurewebsites.net/LP18WS.asmx/AuthonticateUser",
              contentType: "application/jsonp; charset=utf-8",
            data: {
               "some data"
            },               
            dataType: "json",
            success: function (msg) {
               //success
              }
            },
            error: function (msg) {
               //error
            },
        });
    }

i have used Jquery,json,html5,webservice to develop the application.

When I run the app it will throw 

undefined error at "XMLHttpRequest cannot load http://lp18mobile.azurewebsites.net/LP18WS.asmx/AuthonticateUser. 
Origin http://'localhost:5733/..' is not allowed by Access-Control-Allow-Origin."

why?

jgauffin
  • 99,844
  • 45
  • 235
  • 372
user2343766
  • 11
  • 1

3 Answers3

1

Your code is actually attempting to make a CORS request, not an ordinary POST.

Modern browsers will only allow Ajax calls to pages in the same domain as the source HTML page.

In other words, whenever the HTML page that tries to make an Ajax request is not on the same domain as the target URL (in your case, lp18mobile.azurewebsites.net:80), the browser won't make the call (as you'd expect). Instead, it will try to make a CORS request. Bear in mind that, for the browser, localhost:80 and localhost:5733 (same host, but different ports) are different domains.

CORS request? What is that?

Wikipedia says: Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, due to the same origin security policy.

To put it shortly, to perform a CORS request, your browser:

  • Will first send an OPTION request to the target URL
    • That's how it found out that Origin ... is not allowed by Access-Control-Allow-Origin.
  • And then only if the server response to that OPTION contains the adequate headers (Access-Control-Allow-Origin is one of them) to allow the CORS request, the browser will perform the call (almost exactly the way it would if the HTML page were at the same domain).
    • If the expected headers don't come, the browser simply gives up (like it did to you).

How to make it work?

If you can't change the web service or the HTTP server where it is hosted: There is nothing you can do about it other than deploying that HTML file in a server located at the same domain of the service (in your scenario, lp18mobile.azurewebsites.net:80).

If you do can change the web service: To enable CORS in ASP.NET web services, you can just add the headers by adding the following line to your source pages:

Response.AppendHeader("Access-Control-Allow-Origin", "*");

But this is just a workaround to get you started. You really should get to know more about the CORS headers. More details in: Using CORS to access ASP.NET services across domains

If you do can change the HTTP server of the web service: Check this link to see how you can do it on Apache. Click here to learn how to enable it in IIS7 or here to make it in IIS6.

How about JSONP?

To use JSONP in this scenario, you'd have to change the service to return information via GET, as you can't POST using JSONP. (This answer points to some hacks, but that's going too far, I think.)

I don't have access to the HTTP server or the web service. No workarounds at all, then?

There are some options, but none of them is a clean workaround, really. You could set up an application (at the same domain/port of your HTML file) that forwards every TCP/IP request to lp18mobile.azurewebsites.net:80, and then fool your browser. Or you could set up a mirror of that web service in you domain/port. You see, it all becomes too dirty from this point on.

Community
  • 1
  • 1
acdcjunior
  • 132,397
  • 37
  • 331
  • 304
  • I would have voted +1 since it's a detailed answer, but... CORS can be solved by adding policy headers to the HTTP response. It's not trivial to setup if you do not know the headers, but it's fully possible. – jgauffin May 02 '13 at 17:37
  • The answer assumed he did not have control over the HTTP (or web service) server. I edited to include some options to the case when he does can change them. – acdcjunior May 02 '13 at 18:30
0

Your data type should be dataType:"jsonp"

vher2
  • 980
  • 6
  • 9
-1

Misspelled contentType: "application/jsonp; charset=utf-8"
Replace it by:
contentType: "application/json; charset=utf-8"

DaGLiMiOuX
  • 889
  • 9
  • 28
  • Sometimes not known errors happens because properties are bad spelled, just was to check if he had a well formed code. I think it's not a reason to put -1 to my answer. – DaGLiMiOuX May 02 '13 at 16:11
  • I mean that if he don't know what kind of error is and he has that code, I suggested that it could be for his bad spelled properties, etc. First of all you have to check your code and send it correctly spelled to let people help with your problem. Anyway I'm not gonna discuss this anymore. You think that his question it's okay when many people spoke about his bad spelled properties. Just take a look on yourself, instead give thanks to people that tries to help other people all you did here its to discard my answer, when I said like others that his code it's bad spelled. – DaGLiMiOuX May 03 '13 at 09:32