Question

现在我正在探索Polymer-project 1.0，任务是重复获取JSON和打印输出。

但无论我在下面尝试过什么，错误即将来临，即使我尝试使用Github pages也会在终端中给出同样的错误响应

错误

XMLHttpRequest无法加载https://ajax.googleapis.com/ajax/services/search/news?v=1.0&rsz=8&pz=1&cf=all&ned=in&hl=en&topic=tc。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://rajasimon.github.io”访问。

不进入主题并设计材料设计......我希望功能首先发挥作用。所以我在下面写了代码......

的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: *的谷歌浏览器应用程序，然后上面的代码开始工作......

enter image description here

即使我尝试使用铁-ajax演示也会给出相同的结果。这里发生了什么事。我是宇宙中接收此错误的人吗。

Answer 1

您可以使用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属性以及byutv-jsonp的当前版本（1.2.0）非常重要。

Answer 2

您需要使用jsonp - 有关此处的更多信息https://en.wikipedia.org/wiki/JSONP

<强>演示

https://jsfiddle.net/1v2z799o/

<强>代码

$.ajax({
    url: "https://ajax.googleapis.com/ajax/services/search/news?v=1.0&rsz=8&pz=1&cf=all&ned=in&hl=en&topic=tc",

    jsonp: "callback",

    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",

    // Work with the response
    success: function( response ) {
      console.log(response); // server response

    }
});

<强>结果

enter image description here

但我没有在handleAs的聚合物铁-ajax jsonp中看到一个选项，但尝试了可用的选项

https://elements.polymer-project.org/elements/iron-ajax

我环顾四周，有byutv-jsonp

byutv-jsonp element（）公开网络请求功能。它是一种聚合物v1.0 +元素，便于制作 JSONP请求。它使用Polymer行为（Byutv.behaviors.Jsonp）。它在Polymer的铁 - ajax元素（）之后形成图案。它有使用单元测试进行测试。它是BYUtv Elements组的一部分元素。

https://github.com/coderfin/byutv-jsonp

Answer 3

我试过JSONP，但它对我不起作用。然后我在网络安全禁用模式下运行我的Chrome浏览器，并通过AJAX请求调用第三方网址Access-Control-Allow-Origin问题已解决。

请注意，这是开发环境中的临时修复，仅适用于Chrome。

在桌面或其他地方创建Google Chrome的快捷方式
右键单击它＆gt;选择属性
像这样更改target：

＆＃13;

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security

＆＃13;

当您运行Chrome时，您会收到一条警告，指出它在不安全模式下运行，但您可以暂时忽略它并继续开发。

希望这有效！

更新：您可以尝试使用OSX和Linux / Ubuntu的命令

作为Windows用户，我对解决方案不是很确定，但你可以尝试一下。

Linux的：

$ google-chrome --disable-web-security

命令行方法：

＆＃13;

chromium-browser --disable-web-security

＆＃13;

OSX：

＆＃13;

$ open -a Google\ Chrome --args --disable-web-security

＆＃13;

要访问AJAX或JSON等本地文件，您也可以使用此标志。同样，这完全是出于开发目的。

-–allow-file-access-from-files

注意：如果您在禁用网络安全的情况下浏览互联网，请务必小心。这将使您的PC更容易受到攻击！

请记住，在--disable-web-secutiry模式下运行Chrome及其后台应用之前，您需要关闭它们的所有实例。如果这可以解决您的问题，请与我们联系。

如何解决聚合物项目中没有'Access-Control-Allow-Origin'？

3 个答案: