4

I wanted to send Mobile number and EmailID using jQuery AJAX to my MVC controller to check whether these details are already exist in the database or not.

When I am using the [HttpPost] attribute on my action method, I am getting error as:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at url.

If I remove the [HttpPost] attribute, my action method is getting called, but all the values received in action method argument are null.

Below is the action method code:

public class LogOnModel
{
    public string Mobile { get; set; }
    public string EmailID { get; set; }
}

[HttpPost]
[AllowAnonymous]
///AJAXService/LogOnAjax
public ActionResult LogOnAjax(LogOnModel obj)
{
    return Json(true);
}

Below is my AJAX call:

var LoginModel = {
    'Mobile': "ASH",
    'EmailID': "MITTAL",
};
$.ajax({
    url: 'http://localhost:51603/AJAXService/LogOnAjax',
    type: 'GET',
    contentType: 'application/json',
    dataType: 'jsonp',
    data: JSON.stringify(LoginModel),
    success: function (result) {
        if (result == true) {
            window.location = "/Dashboard";
        } else {
            $QuickLoginErrors.text(result);
        }
    }
});

I have placed the code below in my web.config file to avoid CORS errors:

<customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
Ashish Mittal
  • 643
  • 3
  • 12
  • 32
  • I wouldn't expect a CORS error if you are posting to your own website. Can you check that the URL correct? – Karl Gjertsen Nov 06 '15 at 15:13
  • you see this? http://stackoverflow.com/questions/6290053/setting-access-control-allow-origin-in-asp-net-mvc-simplest-possible-method – JamieD77 Nov 06 '15 at 16:51

2 Answers2

5

If the AjaxService controller is in the same project as the View you're working on:

var LoginModel = {
    Mobile: "ASH",
    EmailID: "MITTAL"
};

$.ajax({
    url: '@Url.Action("LogOnAjax","AJAXService")', // try to use Url Helper when possible
    type: 'POST', // use Get for [HttpGet] action or POST for [HttpPost]
    //contentType: 'application/json', not needed
    //dataType: 'jsonp', jsonp is for sending to a site other than the current one.. 
    data: LoginModel, // no need to stringify
    success: function (result) {
        if (result == true) {
            window.location = "/Dashboard";
        } else {
            $QuickLoginErrors.text(result);
        }
    }
});
Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
JamieD77
  • 13,796
  • 1
  • 17
  • 27
  • No I have just created this html code in a simple test.html file, and then opening this html file via Chrome browser. I don't have this code in my view.. – Ashish Mittal Nov 06 '15 at 16:43
  • Thanks a lot Jamie... I just added that AJAX call inside my view and everything started working after that..... Many thanks again. – Ashish Mittal Nov 06 '15 at 17:55
2

Keep the [HttpPost] and add this line right before your $.ajax line:

$.support.cors = true;

Also change your $.ajax method to match your [HttpPost]. Change the line:

type: 'GET',

to

method: 'POST',

Note: This only worked in IE for me. Chrome still refused to complete the Ajax call. However, that was a while back and I'm not sure if the newer versions of Chrome will work with this line.

Very important note: Only use this line in development. Do not compile your App with this line.

Racil Hilan
  • 24,690
  • 13
  • 50
  • 55