7

I am new to angular 2 and currently working with angular 2.2.1 in which I am successfully able to post request and get success response however when I try to get Authorization header from response I always get null whether I am able to get Content-Type header. Below is my solution so far.

service.ts login method:

login(model: LoginModel) {
        let requestUrl = '/someurl';
        let requestPayload = JSON.stringify(model);
        let headers = this.getHeaders(false); // ... Set all required headers       

        let options = new RequestOptions({ headers: headers }); // Create a request option

        return this.http.post(requestUrl, requestPayload, options) // ...using post request
            //.map((res: Response)) // ...and calling .json() on the response to return data
            .subscribe((res: Response) => {
                var payload = res.json();
                var authorization = res.headers.get('Authorization');
                var contentType = res.headers.get('Content-Type');                                
                console.log(payload, contentType, authorization)
            });            
    }

Header Helper

getHeaders(isSecureAPI: boolean) {
        let headers = new Headers({ 'Content-Type': 'application/json', 'Accept': 'application/json' });
        if (isSecureAPI) {
            headers.append('Authorization', 'GetFromSession');
            headers.append('X-UserID', 'GetFromSession');
        }
        return headers;
    }

Fiddler track:

enter image description here

Angular Console Output enter image description here

So anyone can guide me what I am possibly doing wrong?

6
  • check the headers that might be not allowed by the server. Commented Feb 6, 2017 at 9:03
  • @Roman I am working on client side so could you please guide, How I can check on service side? Commented Feb 6, 2017 at 9:12
  • It's not possible without server side. Commented Feb 6, 2017 at 9:27
  • I don't know why It has been down voted and If anyone feel so, could you please atlist let me know the reason, which might guide me some right direction. Thanks :) Commented Feb 6, 2017 at 9:53
  • @RomanC As you can see in Fiddler screenshot we are getting list of allowed headers by the server, Which contains Authorization as well. Commented Feb 6, 2017 at 10:13

2 Answers 2

15

Header was allowed but not exposed on CORS server however adding headers.add("Access-Control-Expose-Headers", "Authorization, X-Custom"); on server did the job :)

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

1 Comment

this did the job for me
2

I've been trying to find a solution and came across this

Let's say I'm using the Microsoft Cors WebAPI 2 Nuget package, and I have the following global configuration in my WebApiConfig.cs:

...
var corsAttr = new EnableCorsAttribute("http://localhost:4200", "*", "*");
config.EnableCors(corsAttr);
...

The EnableCorsAttribute constructor accepts a 4th string parameter to globally allow any additional headers:

var corsAttr = new EnableCorsAttribute("http://localhost:4200", "*", "*", "X-Foo, X-Bar, X-Baz");

2 Comments

Afaik browsers do not generally support a wildcard for the Access-Control-Expose-Headers
Did some further research @ErikAlsmyr - is this what you were referring to? (Under the Compatibility notes section) developer.mozilla.org/en-US/docs/Web/HTTP/Headers/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.