现在我在探索 Polymer-project 1.0
任务是获取JSON
并反复打印输出。
但是无论我在下面尝试什么错误都会出现,即使我尝试使用 Github pages
在终端中也给了我同样的错误响应
错误
XMLHttpRequest cannot load https://ajax.googleapis.com/ajax/services/search/news?v=1.0&rsz=8&pz=1&cf=all&ned=in&hl=en&topic=tc. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://rajasimon.github.io' is therefore not allowed access.
不是主题化和设计 Material 设计......我希望功能首先起作用。所以我写了下面的代码......
index.html
<iron-ajax
auto
url="https://ajax.googleapis.com/ajax/services/search/news?v=1.0&rsz=8&pz=1&cf=all&ned=in&hl=en&topic=tc"
handle-as="json"
last-response="{{ajaxResponse}}"></iron-ajax>
<template is="dom-repeat" items="{{ajaxResponse.responseData.results}}">
<paper-material elevation="1" class="paper-font-body2">
<h1>{{item.title}}</h1>
<iron-image src="[[item.image.url]]" style="width:800px; height:450px; background-color: lightgray;" sizing="cover" preload fade></iron-image>
<p>{{item.content}}</p>
</paper-material>
</template>
启用
为了调试,我安装了名为
Allow-Control-Allow-Origin: *
的谷歌浏览器应用程序然后上面的代码开始工作......即使我尝试使用 iron-ajax 演示也会给出相同的结果。这里发生了什么事。我是宇宙中唯一接受此错误的人吗?
最佳答案
您可以使用 byutv-jsonp
解决此问题.它是一个 Polymer 1.0+ 元素,允许发出 JSONP 请求。您使用的 Google API 支持 JSONP。我已经测试了下面的代码并得到了正确的响应。
<byutv-jsonp
auto
url="https://ajax.googleapis.com/ajax/services/search/news"
params='{"v":"1.0","rsz":"8","pz":"1","cf":"all","ned":"in","hl":"en","topic":"tc"}'
last-response="{{lastResponse}}"
last-error="{{lastError}}"
debounce-duration="300"></byutv-jsonp>
<template is="dom-repeat" items="{{lastResponse.responseData.results}}">
<paper-material elevation="1" class="paper-font-body2">
<h1>[[item.title]]</h1>
<iron-image src="[[item.image.url]]" style="width:800px; height:450px; background-color: lightgray;" sizing="cover" preload fade></iron-image>
<p>[[item.content]]</p>
</paper-material>
</template>
将查询参数添加到
params
中很重要属性而不是 url
当前版本 (1.2.0) 的属性 byutv-jsonp
.
关于ajax - 如何解决 polymer 项目中的No 'Access-Control-Allow-Origin'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31130939/