CORS problems using angularjs $http

Question

I get problems when using angularjs $http in a CORS request, my success function authenticateSuccess(data, status, headers) get wrong headers. As we know, every CORS request will be twice in angularjs, I get twice response from server, the first time is the cors validation information, the second is needed response, but my success function get the headers in the first response. But it's data is from second response.

function login(credentials) {

        var data = {
            username: credentials.username,
            password: credentials.password,
            rememberMe: credentials.rememberMe
        };
        console.log(data);
        return $http.post('//localhost:8080/api/authenticate', data).success(authenticateSuccess);

        function authenticateSuccess(data, status, headers) {
            console.log(headers());
            console.log(data);
            var bearerToken = headers('Authorization');
            if (angular.isDefined(bearerToken) && bearerToken.slice(0, 7) === 'Bearer ') {
                var jwt = bearerToken.slice(7, bearerToken.length);
                service.storeAuthenticationToken(jwt, credentials.rememberMe);
                return jwt;
            }
        }
    }

The $http .success handler is deprecated. Use .then instead. docs.angularjs.org/api/ng/service/$http#deprecation-notice — Phil
– Phil, Commented Jul 27, 2016 at 2:13
yep, I have changed it using .then. but I get the same problems, the headers is from the first time response, the data is from the second time response. — 卢俊星
– 卢俊星, Commented Jul 27, 2016 at 2:28

Vaibhav Jain · Accepted Answer · 2017-06-07 16:12:21Z

You are getting this problem as header which you are sending is not matched with the headers in backend

So let suppose In frontend you sending headers

contentHeaders = new Headers(); contentHeaders.append('Authorization', 'your token'); contentHeaders.append('Content-Type', 'application/json'); contentHeaders.append('Access-Control-Allow-Origin', '*');

So those headers like 'Authorization','Content-type', 'Access-Control-Allow-Origin' should matched with your header allow in backend.

So in backend 'Access-Control-Allow-Headers' should have all above headers see below

res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Authorization,content-type,Access-Control-Allow-Origin");

So here in Access-Control-Allow-Headers you have to passed all headers which you send from frontend : 'Authorization','Content-type', 'Access-Control-Allow-Origin'.

It will work perfectly when you use above concept.

Thanks

Collectives™ on Stack Overflow

CORS problems using angularjs $http

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related