How to get response headers from iron-form Polymer

1
votes

I have a form, which I submit like so:

form.addEventListener("iron-form-response", function(event) {   
    //How can I access response headers here?                      
});      

form.submit();

I know the way I can access response body:

event.detail.response

But what I want is server response headers. I need it, because this response may contain in headers some tokens, which I must store in cookies.

1
javascriptpolymerpolymer-2.x

1 Answers

1
votes

The event.detail is actually an <iron-request>, which exposes the underlying XMLHTTPRequest via e.detail.xhr, which allows you to use getResponseHeader(name) for a specific header:

_onResponse(e) {
  const header = e.detail.xhr.getResponseHeader('X-Special-Header');
  ...
}

Example:

<dom-module id="x-foo">
  <template>
    <iron-form on-iron-form-response="_onResponse">
      <form method="post"
            action="//httpbin.org/post">
        <label for="myName">My name</label>
        <input type="text" id="myName" name="name">
        <button>Submit</button>
      </form>
    </iron-form>
  </template>

  <script>
  class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    _onResponse(e) {
      console.debug('response header("Content-Type")', e.detail.xhr.getResponseHeader('Content-Type'));
      console.debug('all response headers', e.detail.xhr.getAllResponseHeaders())
    }
  }
  customElements.define(XFoo.is, XFoo);
  </script>
</dom-module>

demo