Posting with angular http.post method - xmlhttprquest cannot load the service

Question

Angular $http.post method is not posting JSON to service (RESTFul service, node service). Showing the following error :

XMLHttpRequest cannot load /some/service. Invalid HTTP status code 404

Here is the posted code

$http({method:'POST', url:'/some/service/',data:{"key1":"val1","key2":"val2"}}).success(function(result){
  alert(result);
});

The same code is working with the old version of my chrome i.e, v29...* . I updated my chrome to V30...* . Now, it is not working. Not working in the Firefox as well. Is there any problem with chrome and Firefox?

Can anybody help?

Hi there, welcome to SO, please remeber to put all example code within code blocks when posting. — Andre Lombaard, Oct 06 '13 at 17:44
Is this call on the same domain? I think you may be trying to call another domain so the browsers block it for security reasons. Try JSONP if thats the case. — hjgraca, Oct 06 '13 at 21:21

score 2 · Accepted Answer · edited May 23 '17 at 12:06

I came across a similar issue after updating Chrome to version 30.0.1599.101 and it turned out to be a server problem.

My server is implemented using Express (http://expressjs.com/) and the code below allowing CORS (How to allow CORS?) works well:

var express = require("express");
var server = express();

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', req.headers.origin || "*");
    res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'content-Type,x-requested-with');
    next();
}
server.configure(function () {
    server.use(allowCrossDomain);
});

server.options('/*', function(req, res){
    res.header('Access-Control-Allow-Origin', req.headers.origin || "*");
    res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'content-Type,x-requested-with');
    res.send(200);
});

server.post('/some_service', function (req, res) {
  res.header('Access-Control-Allow-Origin', req.headers.origin);

  // stuff here

  //example of a json response
  res.contentType('json');
  res.send(JSON.stringify({OK: true}));
});

The HTTP request looks like:

$http({
    method: 'POST',
    url: 'http://localhost/some_service',
    data: JSON.stringify({
        key1: "val1",
        key2: "val2"
    }),
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    }
}).success(
    function (data, status, headers, config) {
        //do something
    }
).error(
    function (data, status, headers, config) {
        //do something
    }
);

As pointed out in here (https://stackoverflow.com/a/8572637/772020), the idea is to ensure that your server handles properly the OPTIONS request in order to enable CORS.

score 0 · Answer 2 · answered Oct 06 '13 at 18:36

0

Well, a new chrome update was released a couple of days ago. Check the patch notes from that release if they changed anything security related. My extension stopped working both in FF and Chrome a couple of days ago.

answered Oct 06 '13 at 18:36

Milos

2,927
1
15
27

Posting with angular http.post method - xmlhttprquest cannot load the service

2 Answers2