如何解决 polymer-project 中的 No 'Access-Control-Allow-Origin'？

Question

我正在探索 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>

启用

为了调试，我安装了 Google Chrome 名为 Allow-Control-Allow-Origin: * 的应用程序。然后上面的代码开始工作了。

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

Answer 1

您将需要使用 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

    }
});

结果

但是我没有在 Polymer iron-ajax handleAs 中看到 jsonp 的选项，但请尝试可用的选项

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

我环顾四周，有 byutv-jsonp

The byutv-jsonp element () exposes network request functionality. It is a Polymer v1.0+ element that facilitates making JSONP requests. It uses Polymer behaviors (Byutv.behaviors.Jsonp). It is patterned after Polymer's iron-ajax element (). It has been tested using unit tests. It is part of the BYUtv Elements group of elements.

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

Answer 2

您可以使用 byutv-jsonp 解决此问题。它是一个允许发出 JSONP 请求的 Polymer 1.0+ 元素。您使用的 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.[=16= 的当前版本 (1.2.0) 很重要]

Answer 3

我试过JSONP但它对我不起作用。然后我运行我的 Chrome 浏览器处于 Web 安全禁用模式和 Access-Control-Allow-Origin 问题通过 AJAX 请求调用的第 3 方 URL 为我解决了。

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

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

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

当你运行 Chrome时你会收到一个警告，提示它运行正在进入不安全模式，但你可以暂时忽略它并继续开发。

希望这有效！

更新：您可以尝试 OSX 和 Linux/Ubuntu

的命令

作为 Windows 用户，我不太确定解决方案，但您可以尝试一下。

Linux:

$ google-chrome --disable-web-security

命令行方式：

chromium-browser --disable-web-security

OSX:

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

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

-–allow-file-access-from-files

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

请记住，在 --disable-web-secutiry 模式下运行之前，您需要关闭 Chrome 的所有实例及其后台应用程序。如果这能解决您的问题，请告诉我。

如何解决 polymer-project 中的 No 'Access-Control-Allow-Origin'？

How to solve No 'Access-Control-Allow-Origin' in polymer-project?

ajax

polymer

polymer-1.0