CODEWITHSUNDEEP
jsongoogle-chromefirefoxangularjsxmlhttprequest
Astroboy Murthy
Astroboy Murthy

Reputation: 45

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

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?

Upvotes: 4

Views: 4967

Answers (2)

rdonatoiop
rdonatoiop

Reputation: 1185

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.

Upvotes: 2

Milos
Milos

Reputation: 2946

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.

Upvotes: 0

Related Questions