Question

我是Polymer的新手（我正在尝试学习如何同时使用它与Angular 2）并且在查看文档之后，它看起来像这样

<iron-ajax url="https://httpbin.org/get" last-response="{{data}}" handle-as="json"
       headers="{'Authorization': 'pew'}" auto>

但标题不包含授权标题

"headers": {
    "Accept": "application/json", 
    "Accept-Encoding": "gzip, deflate, sdch, br", 
    "Accept-Language": "en-US,en;q=0.8", 
    "Host": "httpbin.org", 
    "Origin": "http://localhost:3000", 
    "Referer": "http://localhost:3000/", 
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
}

所以经过一些谷歌搜索后，我发现了这个SO question并尝试按照说明进行操作并将iron-ajax更改为

<iron-ajax url="https://httpbin.org/get" last-response="{{data}}" handle-as="json"
       headers="'{{getHeadersURL()}}'" auto>

getHeadersURL()看起来像

var headers = {'Authorization': 'pew'};

function getHeadersURL() {
    return headers;
}

但是，即使在发送之后，标题仍然与上面相同。是否有一些我不理解的东西或者我做错了什么。

Answer 1

问题是由于单引号，您的标头未正确格式化为JSON。 JSON syntax要求字符串用双引号括起来。如果您尝试解析现有的内容，则会发现错误：

＆＃13;

try {
  // single-quotes == invalid JSON
  JSON.parse("{'Authorization': 'pew'}");
} catch (err) {
  console.error(err.message);
}

＆＃13;

重写示例以使用双引号字符串可以解决问题。

内联绑定标题：

<iron-ajax headers='{"Authorization": "pew"}'>

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="iron-ajax/iron-ajax.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-ajax url="https://httpbin.org/get"
                 last-response="{{data}}"
                 on-response="_onResponse"
                 headers='{"Authorization": "pew"}'
                 auto>
      </iron-ajax>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          _onResponse: function(e) {
            console.log('response', e.detail.response);
          }
        });
      });
    </script>
  </dom-module>
</body>

＆＃13;

codepen

从函数返回的绑定标头：

<iron-ajax headers="{{getHeaders()}}">

// script
Polymer({
  ...
  getHeaders: function() {
    return {"Authorization": "pew"};
  }
});

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="iron-ajax/iron-ajax.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-ajax url="https://httpbin.org/get"
                 last-response="{{data}}"
                 on-response="_onResponse"
                 headers="{{getHeaders()}}"
                 auto>
      </iron-ajax>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          _onResponse: function(e) {
            console.log('response', e.detail.response);
          },
          getHeaders: function() {
            return {"Authorization": "pew"};
          }
        });
      });
    </script>
  </dom-module>
</body>

＆＃13;

codepen

标题不是由铁阿贾克斯发送的

1 个答案: