web-dev-qa-db-ja.com

ポリマープロジェクトで「Access-Control-Allow-Origin」を解決する方法は？

今私は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>

有効化

デバッグのために、Google chrome Allow-Control-Allow-Origin: *という名前のアプリをインストールしました。その後、上記のコードが機能し始めました...

enter image description here

Iron-ajaxデモを試してみても、同じ結果が得られます。ここで何が起こっているのか。私は宇宙でこのエラーを受け取った一人ですか。

ajaxpolymerpolymer-1.0
14
Raja Simon

この問題は、 byutv-jsonp を使用して解決できます。これはPolymer 1.0+要素でJSONPリクエストを作成できます。使用しているGoogleAPIは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>

byutv-jsonpの現在のバージョン（1.2.0）では、params属性ではなくurl属性にクエリパラメータを追加することが重要です。

4
coderfin

JSONPを試しましたが、うまくいきませんでした。次に、ChromeブラウザをWebセキュリティ無効モードで実行し、AJAXリクエストが解決されたため、サードパーティのURLが呼び出された場合の_Access-Control-Allow-Origin_の問題が発生しました。

これは開発環境での一時的な修正であり、Chromeでのみ機能することに注意してください。

  1. デスクトップまたは他の場所にGoogleのショートカットを作成するChrome
  2. それを右クリック>プロパティを選択
  3. 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
_

注意：Webセキュリティを無効にしてインターネットを閲覧している場合は注意が必要です。これにより、PCが攻撃に対してより脆弱になります。

_--disable-web-secutiry_モードで実行する前に、Chromeとそのバックグラウンドアプリのすべてのインスタンスを閉じる必要があることを忘れないでください。これで問題が解決するかどうかをお知らせください。

1
Subrata Sarkar

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

ただし、Polymer iron-ajax handleAs for jsonpにオプションが表示されませんが、利用可能なオプションを試してください

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

周りを見回したところ、byutv-jsonp

Byutv-jsonp要素（）は、ネットワーク要求機能を公開します。これは、JSONPリクエストの作成を容易にするPolymer v1.0 +要素です。Polymer動作（Byutv.behaviors.Jsonp）を使用します。Polymerのiron-ajax element（）。ユニットテストを使用してテストされています。BYUtvElementsグループの要素の一部です。

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

1
Tasos