Get a custom header in angular $http from web api controller

Question

I am trying to pass a piece of information along with my content in my HttpResponseMessage like:

        string jsonFiles = JsonConvert.SerializeObject(listFiles);
        HttpResponseMessage response = new HttpResponseMessage
        {
            StatusCode = HttpStatusCode.OK,
            Content = new StringContent(jsonFiles)
        };
        response.Headers.Add("Key", "Value");

        return response;

However in my angular call and response I cannot see the "Key" header in response.config.headers or response.headers. Any idea why?

  $http.get("/api/Locker").then(function (response) {
        console.log(response);
        console.log(response.headers);
        console.log(response.config.headers);
  });

In my Startup.cs I do have:

        app.UseCors(CorsOptions.AllowAll);
        app.UseWebApi(config);

Can you try using the success overload with 4 parameters (response, status, headers, config) and access the headers? — Parthasarathy
– Parthasarathy, Commented Apr 14, 2016 at 5:10
undefined. However if I use just the response the response object has all of those properties on it. Response.config.headers has a Accepted header and a Bearer header but not the one I added. — Pipeline
– Pipeline, Commented Apr 14, 2016 at 5:16
As per the documentation response.config returns the config used while sending the request. response.headers is a function. Try using response.headers("Key") and see if it helps. — Parthasarathy
– Parthasarathy, Commented Apr 14, 2016 at 5:30
Worked like a charm Sarathy if you want to make an answer I will accept — Pipeline
– Pipeline, Commented Apr 15, 2016 at 14:43

Parthasarathy · Accepted Answer · 2016-04-17 11:53:22Z

1

As per the documentation response.config returns the config used while sending the request. response.headers is a function. Try using response.headers("Key") and see if it helps.

answered Apr 17, 2016 at 11:53

Parthasarathy

2,8281 gold badge14 silver badges14 bronze badges

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

Comments

Federico Dipuma · Accepted Answer · 2016-04-14 06:53:13Z

0

You have to explicitly add the custom header to your CORS policy, or AngularJS will be unable to read it. Change this:

app.UseCors(CorsOptions.AllowAll);

To this:

var policy = new CorsPolicy
{
    AllowAnyHeader = true,
    AllowAnyMethod = true,
    AllowAnyOrigin = true,
    SupportsCredentials = true
};

policy.ExposedHeaders.Add("MyHeader");

app.UseCors(new CorsOptions
{
    PolicyProvider= new CorsPolicyProvider
    {
        PolicyResolver = c => Task.FromResult(policy)
    }
});

answered Apr 14, 2016 at 6:53

Federico Dipuma

18.4k4 gold badges44 silver badges58 bronze badges

2 Comments

Federico Dipuma Over a year ago

Then you have to inspect your HTTP response using Fiddler and check if both your custom header and the Access-Control-Allow-Origin header are present and correct. Also, always make sure that your call to app.UseCors is made before any other OWIN middleware in the pipeline.

Pipeline Over a year ago

I had been doing that. Sarathy's answer in the comments is what worked for me. Didn't have to change anythign with CORS.

yilik01 · Accepted Answer · 2016-05-25 08:11:23Z

0

I am using WebApi version 5.2.3. To export a response header, you can try creating a custom attribute, for example

public class CustomHeadersAttribute : ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        actionExecutedContext.Response.Headers.Add("Access-Control-Expose-Headers", "<Your Custom Key>");
        base.OnActionExecuted(actionExecutedContext);
    }
}

Then on your controller or wherever you need it, just add

[CustomHeaders]
public HttpResponseMessage GetMethod() { ... }

answered May 25, 2016 at 8:11

yilik01

1381 silver badge8 bronze badges

Collectives™ on Stack Overflow

Get a custom header in angular $http from web api controller

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related