Как решить No-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". 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: *, тогда приведенный выше код начал работать...

Даже если бы я попробовал с железом-ajax-демо, то получится тот же результат. что происходит здесь. Я один человек, получивший эту ошибку во вселенной.

Ответ 1

Вы можете решить эту проблему, используя byutv-jsonp. Это элемент Polymer 1.0+, который позволяет создавать запросы JSONP. Используемый API Google поддерживает 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.

Ответ 2

Вам нужно будет использовать jsonp - подробнее об этом здесь https://en.wikipedia.org/wiki/JSONP

Demo

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

Элемент byutv-jsonp() предоставляет сетевой запрос функциональность. Это элемент Polymer v1.0 +, который облегчает создание Запросы JSONP. Он использует поведение Polymer (Byutv.behaviors.Jsonp). Это с рисунком после элемента полимерного железа-ajax(). В нем есть были протестированы с использованием модульных испытаний. Это часть группы BYUtv Elements элементов.

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

Ответ 3

Я попробовал JSONP, но это не сработало для меня. Затем я запустил браузер Chrome в режиме безопасности в Интернете и Access-Control-Allow-Origin для стороннего URL-адреса, вызываемого через запросы AJAX, которые были решены для меня.

Обратите внимание, что это временное исправление в среде разработки, и оно будет работать только для Chrome.

Создайте ярлык Google Chrome на рабочем столе или в другом месте
Щелкните правой кнопкой мыши на нем > Выбрать свойства
Измените target следующим образом:

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