How to send request headers in “iron-form”?

Question

I am using Polymer 1.7.0. How do I send request headers in <iron-form> ?

I tried this:

form.addEventListener('iron-form-presubmit', function(event) {
    var headers = {'akash':'akash'};
    event.target.request.requestHeaders = headers;
    console.log(event.target.request.requestHeaders);
});

which logged the following text, but my headers were not present in the request.

console.log(event.target.request.requestHeaders); ==> "Object {content-type: "application/x-www-form-urlencoded"}"

Answer 1

The <iron-form>.request property is an <iron-ajax> , and <iron-ajax>.requestHeaders is actually not a settable property. Use the <iron-ajax>.headers property instead

form.addEventListener('iron-form-presubmit', function(event) {
  var headers = {'akash':'akash'};
  event.target.request.headers = headers;
});

codepen

Answer 2

We can add Headers using this two ways :

1. <form is="iron-form" id="form" method="POST" action="/" on-iron-form-response="responseHandler" on-iron-form-error="errorHandler" headers = '{"akash":"akash"}'>

2. <template> <content></content> <div class="layout vertical parent-style"> <form is="iron-form" id="form" method="POST" action="/" on-iron-form-response="responseHandler" on-iron-form-error="errorHandler"> </form> </div>

   `

    function handleLoginAction(event) { var form = Polymer.dom(event).localTarget.parentElement.parentElement; // Get Form ref from DOM. form.headers = "{'akash':'akash'}"; form.submit(); } form.addEventListener('iron-form-presubmit', function(event) { console.log("Headers--------------"); console.log(event.target.request.requestHeaders); // {'akash':'akash'} }); </script> </template>`