AJAX works fine in IE but not in Firefox\Chrome (Bizarre :) )

Question

I'm using IE 10, Firefox 24, Chrome 29.

I have a server running on ASP.NET MVC 4 (IIS 8), with a simple function in the controller:

[HttpPost]
public ActionResult Register(string PhoneNumber, string DisplayName)
{
    // Some commented code here ...
    ViewBag.Message = "Working!";
    return View();
}

The view looks like:

@{
    ViewBag.Title = "Register";
}
@ViewBag.Message

The Ajax call looks like:

$.ajax({
    type: "POST",
    url: "http://localhost:1283/home/Register",
    data: {
        phoneNumber: "123",
        displayname: "Miko"
    },
    success: function (response) {
        alert("In success: " + response);
    },
    error: function (result) {
        alert('In error: '+ result);
    }
})

In all browsers, the AJAX call is made, the Register() in the server is fired, but after it's done, this code works fine in Internet Explorer, but always goes to 'error()' using Firefox\Chrome.

How can I make the functions work for Firefox and Chrome as well ?

Thanks.

DO you know what is the error. Also try to give `dataType:"html"` and `contentType:"application/json"` in ajax settings. — PSL, Sep 23 '13 at 02:27
url: "http://localhost:1283/home/Register" ，it maybe cause by the cross site request,just take a look at console in chrome.I think you should set you frontend and servive on a same host. — Mithril, Sep 23 '13 at 02:34
(PSL) I don't know what is the error. I've added both lines in the AJAX call, still not working. — Miko Diko, Sep 23 '13 at 02:35
(Mithril) in Chrome's console I get this message: XMLHttpRequest cannot load http://localhost:1283/home/Register. Origin null is not allowed by Access-Control-Allow-Origin. — Miko Diko, Sep 23 '13 at 02:37
@MikoDiko Your issue is that domains don't match. So try set origin from the request header to origin in the response header or set it to *. — PSL, Sep 23 '13 at 02:38
that 's it ,you should set you frontend and servive on a same host,or you should add `Access-Control-Allow-Origin:http://www.youhost.com` to response — Mithril, Sep 23 '13 at 02:40

Mithril · Answer 1 · 2013-09-23T03:05:40.467

First, I think you have to take a look at Access_control_CORS.

There is a easy way to solve this problem in MVC.NET. Add Below code to Global.asax

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
        if (!string.IsNullOrWhiteSpace(Request.Headers["Origin"]))
        {
            if (IsOriginInCrossDomainWhiteList(Request.Headers["Origin"]))
            {
                Response.AddHeader("Access-Control-Allow-Origin", Request.Headers["Origin"]);
            }
            else
            {
                Response.End();
            }
        }
    }

    internal static bool IsOriginInCrossDomainWhiteList(string origin)
    {
        Uri uri;
        if (Uri.TryCreate(origin, UriKind.Absolute, out uri))
        {
            foreach (var whiteDomain in Properties.Settings.Default.CrossDomainWhiteList)
            {
                if (string.Compare(uri.Host, whiteDomain, true) == 0)
                {
                    return true;
                }
            }
        }
        return false;
    }

and add some domain to Web.config like :

  <applicationSettings>
     <YourProject.Properties.Settings>
      <setting name="CrossDomainWhiteList" serializeAs="Xml">
        <value>
          <ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xmlns:xsd="http://www.w3.org/2001/XMLSchema">
            <string>www.youhost.com</string>
          </ArrayOfString>
        </value>
      </setting>
     </YourProject.Properties.Settings>
  </applicationSettings>

Then you can use ajax call at the domain added in CrossDomainWhiteList.

AJAX works fine in IE but not in Firefox\Chrome (Bizarre :) )

1 Answers1