AngularJS $http.post error in Internet Explorer <= 9

Question

I have the following bit of code, which works fine in every modern browser, but fails in Internet Explorer 9 and below.

authService.login = function(credentials) {
  return $http.post('https://example.com/login', credentials).then(function(res) {
    return res;
  }, function(err) {
    return err;
  });
};

credentials is an object that looks like this:

{
  username: 'john@example.com',
  password: 'smith'
}

The problem is that the POST never actually happens, instead it jumps straight to return err; and no error is even set. It says Impossible d'effectuer l'opération à cause de l'erreur suivante c00c023e.. The key being c00c023e, which is supposedly an encoding problem, but I don't see how that would completely prevent the call from happening.

The 'fix' is to use $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; which does allow IE to POST, but my backend expects JSON so that doesn't help.

I'm using AngularJS 1.2.22.

Any ideas?

Try sending a json , something like this {credentials:credentials} — cshion, Aug 17 '14 at 02:52
It could be that these browsers do not support serializing to JSON `string`, try doing it on your own: `angular.toJson(credentials)` — Khanh TO, Aug 17 '14 at 02:57
@ExplosionPills Yes, it's cross-domain, but it works in every other browser. — Pier-Luc Gendreau, Aug 17 '14 at 04:53
If you're working with cross-domain, you need to ensure that both the server and client support CORS. In your case, it's likely that IEs <= 9 do not support CORS — Khanh TO, Aug 17 '14 at 05:11
see my answer about browsers supporting CORS and not supporting CORS: http://stackoverflow.com/questions/14898876/the-concept-of-cors-and-should-i-enforce-an-origin-header/14909833#14909833 — Khanh TO, Aug 17 '14 at 05:13

score 3 · Accepted Answer · answered Aug 17 '14 at 16:11

Comments led me in the right direction, this was indeed a CORS issue. Turns out there is a simple and library agnostic fix provided by the XDomain library.

In the app making the CORS request, include the following script before any other scripts:

<!--[if lte IE 9]>
    <script src="http://example.com/xdomain/xdomain.min.js" data-slave="http://example.com/xdomain/proxy.html"></script>
<![endif]-->

Then, on the example.com domain, copy xdomain.min.js and create the proxy.html file that was defined above in the data-slave attribute. The proxy file must contain:

<!DOCTYPE html>
<script src="xdomain.min.js" data-master="https://subdomain.example.com"></script>

Cross-domain requests will now work properly in IE9 and below. You could use XDomain for every browser rather than just IE by removing the conditional comment, but I doubt there is a significant portion of users using a browser that doesn't support CORS that also isn't Internet Explorer.

AngularJS $http.post error in Internet Explorer <= 9

1 Answers1