title: PolymerJS: Iron-Ajax - How to Bind Token to Headers Property?
body: <p>I have a polymer-element and I want to apply a token as headers attribute. </p>
  
  <p>When I push the button an XMLHttpReqeust is send. The responsible <code>iron-ajax</code> element has a <code>headers</code> property with a string. I would like to change the string, and apply a different attribute.</p>
  
  <p>I've been told that normal <code>compound bindings</code> does not work and I should try <code>computed bindings</code> or just <code>computed properties</code>.</p>
  
  <p>But the problem seems to be the question, how to <code>bind</code> these <code>computed properties</code> or <code>computed bindings</code> to the <code>iron-ajax</code> element?</p>
  
  <p>Whenever I use curly braces, nothing gets evaluated. And if I leave them out, only the remaining string gets parsed.</p>
  
  <p>Here is my element:</p>
  
  <pre><code>&lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"&gt;
  
  &lt;dom-module id="demo-element"&gt;
      &lt;template&gt;
          &lt;button on-click="sendXMLHttpRequest"&gt;sendXMLHttpRequest&lt;/button&gt;
  
          &lt;div&gt;
              Computed Binding HeadersProperty: 
              &lt;span&gt;{{computeHeadersProperty(csrfToken)}}&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              Computed Property HeadersProperty: 
              &lt;span&gt;{{headersProperty}}&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              Computed Binding HeadersToken: 
              &lt;span&gt;{{computeHeadersToken(csrfToken)}}&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              Computed Property HeadersToken: 
              &lt;span&gt;{{headersToken}}&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;iron-ajax
               id="ajax"
               method="POST"
               url=""
               handle-as="json"
               headers='{"X-CSRF-Token": "csrfToken"}'
               &gt;&lt;/iron-ajax&gt;
  
      &lt;/template&gt;
      &lt;script&gt;
          Polymer({
              is: 'demo-element',
  
              properties: {
                  csrfToken: {
                      type: String,
                      value: 'aBcDeF'
                  },
                  headersProperty: {
                      type: String,
                      computed: 'computeHeadersProperty(csrfToken)'
                  },
                  headersToken: {
                      type: String,
                      computed: 'computeHeadersToken(csrfToken)'
                  }
  
              },
  
              sendXMLHttpRequest: function () {
                  // ajax call
                  this.$.ajax.body = this.headersProperty;
                  this.$.ajax.generateRequest();
              },
  
              computeHeadersProperty: function (csrfToken) {
                  return '{"X-CSRF-Token":\"' + csrfToken + '\"}';
              },
  
              computeHeadersToken: function (csrfToken) {
                  return csrfToken;
              }
          });
      &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>As you can see I have created computed bindings and properties for the complete <code>headers</code> property and also just for the token I want to pass in. </p>
  
  <p>But the iron-ajax element does not evaluate anything, when I use curly braces.</p>
  
  <p>Here is what I have tried in the <code>iron-ajax</code> element so far:</p>
  
  <ol>
  <li>headers='{"X-CSRF-Token": "{{csrfToken}}"}' // doesn't evaluate</li>
  <li>headers='{"X-CSRF-Token": "{{headersToken}}"}' // doesn't evaluate</li>
  <li>headers="{{headersProperty}}" // doesn't evaluate</li>
  <li>headers="{{computeHeadersProperty(csrfToken)}}" // doesn't evaluate</li>
  <li>headers='{"X-CSRF-Token": "{{computeHeadersToken(csrfToken)}}"}' // doesn't evaluate</li>
  <li>headers='{"X-CSRF-Token": "headersToken"}' // evalutes to <code>{"X-CSRF-Token": "headersToken"}</code></li>
  <li>headers='computeHeadersProperty(csrfToken)' // doesn't evaluate</li>
  </ol>
  
  <p>So, how do I have to bind an attribute to the <code>headers</code> property of the <code>iron-ajax</code> element?</p>
  
  <hr>
  
  <h2>EDIT</h2>
  
  <hr>
  
  <p>Some users have have provided a "working solution", which is unfortunately not working, because the <code>headers</code> seem to be set, but it is not included in the <code>headers request</code>. Proof:</p>
  
  <p><a href="https://i.stack.imgur.com/cpar4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cpar4.jpg" alt="Headers Binding Not Working"></a></p>
  
  <p>Compare this to the case when we use a Random String:</p>
  
  <p><a href="https://i.stack.imgur.com/LRdnY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LRdnY.jpg" alt="Headers String Working"></a></p>
  
  <p>Here the <code>x-csrf-token</code> is properly set.</p>
  
  <p>Because it is not possible to check the request in the provided JSBIN I included a git repository here with the example code: <a href="https://github.com/LoveAndHappiness/polymer-iron-ajax-issue-159" rel="nofollow noreferrer">https://github.com/LoveAndHappiness/polymer-iron-ajax-issue-159</a></p>
  
  <p>I had to include dependencies instead of the polygit resources, because polygit throws errors when working with <code>iron-ajax</code>.</p>
  
  <hr>
  
  <h3>How to reproduce the error?</h3>
  
  <ol>
  <li>git clone <a href="https://github.com/LoveAndHappiness/polymer-iron-ajax-issue-159.git" rel="nofollow noreferrer">https://github.com/LoveAndHappiness/polymer-iron-ajax-issue-159.git</a></li>
  <li>Open DevTools and Hit the Request Button. You will see that no headers are set.
  Change in the <code>iron-ajax</code> element the headers property on line 50 from </li>
  </ol>
  
  <p><code>headers='{{computeHeadersProperty(csrfToken)}}'</code></p>
  
  <p>to</p>
  
  <p><code>headers='{"X-CSRF-Token":"ARandomString"}'</code></p>
  
  <ol start="3">
  <li>Hit the Request Button again and check in Dev-Tools to see that the token is now accurately set in the headers request.</li>
  </ol>
  
  <h3>What I think the error boils down to</h3>
  
  <p>Judging by the Output of the Console, the errors seems to be, that the <code>headings</code> property in the <code>iron-ajax</code> element expects an <code>Object</code>, but the evaluation from the databinding returns a <code>string</code>.</p>
  
  <p>I hope somebody can at least reproduce the error.</p>