-1

I'm trying to read the ETag HTTP header returned by a PUT to AWS S3 but it's not available in the Angular typescript (it is in the browser HTTP response). I have added it to the ExposeHeaders CORS and it is returned in the Access-Control-Expose-Headers header and in the ETag header, but I still can't read it !!!

This is my CORS config:

    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 10
    }
]

This is my HTTP response headers:

x-amz-id-2: <blah>
x-amz-request-id: <blah>
Date: Sat, 10 Apr 2021 15:07:04 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, PUT, POST
Access-Control-Expose-Headers: ETag
Access-Control-Max-Age: 10
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
ETag: "f58<blah>6ae"
x-amz-server-side-encryption: AES256
Content-Length: 0
Server: AmazonS3

And this is my HTTPEvent response (I'm observing events) console log (I get same header details from observing the response btw):

Agular console log of response headers

There are many questions on this topic but I haven't seen any where the HTTP response headers appear to allow the ETag header but it can't be read from Angular anyway.

Many thanks

butigy
  • 11
  • 4
  • https://i.stack.imgur.com/isss4.png doesn’t show the response headers. Instead it shows some details of the request — from the console, it looks like. To view the response headers, you need to instead use the Network pane in devtools. – sideshowbarker Apr 10 '21 at 23:00
  • Just FYI, the image is meant to show the console log from Angular (as per label). Response headers actually received (copied from the browser developer tools network tab) are shown above that, under the heading "Response headers". – butigy Apr 15 '21 at 18:26

2 Answers2

-1

Add Access-Control-Expose-Headers:ETag to response header can solve this issue.

Mehdi Shakeri
  • 584
  • 3
  • 11
  • Already done, as per question. Unless it should be added somewhere else as well? – butigy Apr 10 '21 at 15:59
  • your problem is not about angular `HttpClient` because in the specification explicitly states that "The `Access-Control-Expose-Headers` response header allows a server to indicate which response headers should be made available to *scripts* running in the browser", did you check wildcard? – Mehdi Shakeri Apr 10 '21 at 16:19
  • Hi Mehdi as per the original question the Access-Control-Expose-Headers is set to allow ETag. I can't use a wild card on that as S3 won't let me. Short of a typo (entirely possible) I'm stumped. In the question I've listed the response headers received which include Access-Control-Expose-Headers: ETag,. – butigy Apr 10 '21 at 17:59
-2

OK, so the issue was, I did not know that the headers are not automatically part of the response object, and that you can get them in 2 ways:

  1. response.headers.keys() returns an array of the header keys
  2. response.headers.get('') returns the header value.

Now it works!

butigy
  • 11
  • 4