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

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

Источник

3 ответа

Решение

Вы можете решить эту проблему, используя 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,

Источник

Вам нужно будет использовать 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

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

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

Источник

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

Обратите внимание, что это временное исправление в среде разработки, и оно будет работать только для 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

NB: Вы должны быть осторожны, если вы просматриваете Интернет с отключенной веб-безопасностью. Это сделает ваш компьютер более уязвимым для атак!

Помните, что вам нужно закрыть все экземпляры Chrome и его фоновых приложений, прежде чем запускать его в --disable-web-secutiry Режим. Дайте мне знать, если это решит вашу проблему.

Источник
Другие вопросы по тегам