CODEWITHSUNDEEP
angularjs
Diego Reyes
Diego Reyes

Reputation: 21

AngularJs $http GET passing custom header returns 404

I've been reading many blogs about it and I could not figure it out how to solve my problem..

I need to pass a token as a custom header to a get $http.. I get an error 404 because the GET request turns into OPTIONS. The nodejs API Rest is working properly as I test it with the chrome "rest console" app.

Upvotes: 1

Views: 834

Answers (2)

Diego Reyes
Diego Reyes

Reputation: 21

Thank you Kasper.. This was my server code before starting this thread..

app.all('/*', function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", 'X-Requested-With, Content-Type');
res.header('Access-Control-Allow-Methods', 'GET, POST', 'DELETE', 'PUT');
next();
});

With this server code, everytime I send a request (GET) from the client with AngularJS adding a custom header "token"

    myapp.factory("Booking", function ($resource) {
        return $resource(
                serverUrl + "/agp/pricelist",
                {}, //default parameters
                {
                    "reviews": {'method': 'GET', 'params': {'reviews_only': "true"}, isArray: true,
headers: {'Content-Type':'application/json', 'token': 'diego' }}
                }
        );
    });

So, when you send a custom header rather than the followings:

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type, but only if the value is one of:
  application/x-www-form-urlencoded
  multipart/form-data
  text/plain

the type cors request is not "simple" anymore with a custom header, so when the client makes the request in fact it is making a pre-request with method "OPTIONS" first and then makes the "GET".. in between I was getting 404 error.

I added then to my server:

app.all('/*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", 'X-Requested-With, Content-Type, token');
    res.header('Access-Control-Allow-Methods', 'GET, POST', 'DELETE', 'PUT', 'OPTIONS');
    res.header('Access-Control-Request-Method', 'GET');
    res.header('Access-Control-Request-Headers', 'token');

    if ('OPTIONS' == req.method) {
        res.send(200);
    }
    else {
        next();
    }
//  next();
});

It was supposed to work with the access-control headers I added, but it was still sending back the 404 error.. So the work around was to add

if ('OPTIONS' == req.method) {
    res.send(200);
}
else {
    next();
}

Because as I said before, with a custom header the client first ask for permissions with OPTIONS method, and the sends the proper GET or whatever.

I did not find out another solution since this seems to be a work around, but at least I am not stuck anymore.

This is a good and practical link a about CORS http://www.html5rocks.com/en/tutorials/cors/

Hope this helps someone.

King regards

Upvotes: 1

user1364910
user1364910

Reputation:

I'm not too versed with CSRF and the likes, but I do believe this might be the issue I had with contacting my Express server with Angular.

http://mircozeiss.com/using-csrf-with-express-and-angular/

As stated in that article, Angular uses it's own X-XSRF-TOKEN for CSRF protection. Hence, you need to take that into account when setting up your server.

Following along with that guide and Express v3 all my requests going from the client side to the server side, magically started working.

If this is not the case (and I'm way out there), let me know.

What does your full serverside config look like?

Upvotes: 0

Related Questions