Sending json ajax post request to asp.net mvc error

Question

I sending ajax request from sencha touch to my asp.net mvc service:

 Ext.Ajax.request({
        url: 'http://localhost:52771/api/login',
        method: 'post',
                    defaultHeaders : 'application/json',
        params: {
            post: JSON.stringify ({
                    user: username,
                    pwd: password
                })
        },
        success: function (response) {

            var loginResponse = Ext.JSON.decode(response.responseText);

            if (loginResponse === true) {
                // The server will send a token that can be used throughout the app to confirm that the user is authenticated.
                me.sessionToken = loginResponse.sessionToken;
                me.signInSuccess();     //Just simulating success.
            } else {
                me.signInFailure(loginResponse.message);
            }
        },
        failure: function (response) {
            me.sessionToken = null;
            me.signInFailure('Login failed. Please try again later.');
        }
    });

Here is service code:

Namespace SimpleSevice
Public Class LoginController
    Inherits ApiController

    Private Shared list As IList(Of Login1) = New List(Of Login1)( _
              {New Login1() With {.user = "User", .pwd = "Password"}, _
               New Login1() With {.user = "User1", .pwd = "Password1"}, _
               New Login1() With {.user = "User2", .pwd = "Password2"}
               }
    )

    <System.Web.Mvc.AcceptVerbs("GET")> _
    Public Function GetLogin() As IEnumerable(Of Login1)
        Return list
    End Function

    <System.Web.Mvc.HttpPost> _
    Public Function PostLogin(ByVal login As Login1) As Net.Http.HttpResponseMessage
        If login.user = "John" AndAlso login.pwd = "Human" Then
            Return Request.CreateResponse(Of Boolean)(Net.HttpStatusCode.OK, True)
        End If
        Return Request.CreateResponse(Of Boolean)(Net.HttpStatusCode.NotFound, False)
    End Function

    End Class
End Namespace

I get these errors:

OPTIONS http://localhost:52771/api/login?_dc=1391588046145 405 (Method Not Allowed) 

OPTIONS http://localhost:52771/api/login?_dc=1391588046145 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. 

XMLHttpRequest cannot load http://localhost:52771/api/login?_dc=1391588046145. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. 

Could you help me?

Answer 1

Looks like you need to enable Cross Origin Resource Sharing on your Web API. By default, the web browser which the app is running in will not allow you to call another domain (a different port is considered cross-domain). Here are the details on how to do it on Web API 2...

http://msdn.microsoft.com/en-us/magazine/dn532203.aspx

Edit: And if you're working with Web API 1... http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx