AngularJS CORS request custom header

Question

I'm having trouble getting CORS enabled on my server in combination with AngularJS. I'm using Angular 1.2.16 and this is my server config:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Content-Type, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name, Authorization"
Header set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Credentials "true"

I can use the following request:

$http.post(configuration.authUrl, {username: 'username', password: 'password'})
    .success(function (data) {
         $cookieStore.put(configuration.sessionName, {
             token: data.authenticationToken,
              user: data.user
         });
    })
    .error(function () {}));

since this request doesn't use a custom header.

When I afterwards try to request the following: Balance.get() with Balance being:

angular.module('portalApp')
    .factory('Balance', ['$resource', 'Auth', 'configuration', function ($resource, Auth, configuration) {
        return $resource(configuration.balanceUrl, {}, {
            get: {
                method: 'GET',
                isArray: false,
                headers: {
                    Authorization: Auth.getAuthToken()
                }
            }
        });
    }]);

I get a 401 Unauthorized on the balanceUrl.

In the config I have put:

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

I even tried putting $http.defaults.headers.common.Authorization = Auth.getAuthToken(); before the $resource in the Balance resource factory but that didn't help.

The headers being sent to the preflight OPTIONS request don't have the Authorization header, no matter what method I use. These are the request headers of the preflight OPTIONS request.

OPTIONS /api/v1.0/user/orders HTTP/1.1
Host: host
Connection: keep-alive
Cache-Control: no-cache
Access-Control-Request-Method: GET
Pragma: no-cache
Origin: origin
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Access-Control-Request-Headers: accept, authorization
Accept: */*
Referer: referer
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

Any suggestions?

Miraage · Accepted Answer · 2014-06-23 11:06:02Z

3

As I know you can't use Access-Control-Allow-Origin "*" with Access-Control-Allow-Credentials "true".

answered Jun 23, 2014 at 11:06

Miraage

3,4943 gold badges28 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ritesh Tendulkar · Accepted Answer · 2015-10-14 12:01:11Z

3

After much research I found out the problem wasn't occurring because of the AngularJS or Apache configuration. It was a problem in the backend server app (Java). The urls were restricted for all HTTP methods, so when AngularJS wants to execute the preflight OPTIONS request, the access was denied and a 401 was returned.

This was fixed by doing:

if(!authenticationService.isTokenValid(glueToken) && !((HttpServletRequest)servletRequest).getMethod().equals(HttpMethod.OPTIONS.toString()) ){
  response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
} else {
  filterChain.doFilter(servletRequest, servletResponse);
}

In stead of:

if(!authenticationService.isTokenValid(glueToken)){
  response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
} else {
  filterChain.doFilter(servletRequest, servletResponse);
}

edited Oct 14, 2015 at 12:01

Ritesh Tendulkar

952 silver badges10 bronze badges

answered Jun 23, 2014 at 14:19

mmjmanders

1,5533 gold badges13 silver badges33 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:24:06Z

0

Why not anonymously (don't perform authentication or authorization) allow the options pre-flight request. https://stackoverflow.com/a/21458845/101662

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jun 23, 2014 at 14:29

Oliver

36.6k12 gold badges72 silver badges80 bronze badges

2 Comments

mmjmanders Over a year ago

That's what I do in my own answer so yes, that works

Oliver Over a year ago

Sounded like the options was failing though?

Chris Southam · Accepted Answer · 2014-06-23 11:05:55Z

-1

I'm using quite a different approach but the premise is still the same.

First try putting Bearer in front of your access token:

headers: {
    Authorization: 'Bearer ' + Auth.getAuthToken()
}

If not try this: app.config may not work if you don't have app set up as a variable, so you may need to adjust.

app.config(
    function($httpProvider) {
        $httpProvider.defaults.headers.common = {};
        $httpProvider.defaults.headers.post = {};
        $httpProvider.defaults.headers.put = {};
        $httpProvider.defaults.headers.patch = {};

        $httpProvider.defaults.headers.common.Authorization = 'Bearer ' + Auth.getAuthToken();
    }
);

answered Jun 23, 2014 at 11:05

Chris Southam

5822 gold badges5 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS CORS request custom header

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related