Ajax автозаполнения из поиска YouTube, Cross-Origin Request Blocked

Question

EDIT: Я был в состоянии решить эту проблему, спасибо за вас время

Я пытаюсь сделать автозаполнение на форме поиска для YouTube видео.

я получил URL, вы можете использовать здесь: Youtube API search auto-complete

И я использую этот скрипт (хотя я не думаю, что это имеет много общего с проблемой я имею): https://goodies.pixabay.com/javascript/auto-complete/demo.html

код, я использую

var xhr; 
    new autoComplete({ 
     selector: '.search-box', 
     source: function(term, response){ 
      try { xhr.abort(); } catch(e){} 
      xhr = $.getJSON('https://suggestqueries.google.com/complete/search?client=firefox&ds=yt', { 
      q: term, 
      dataType: "jsonp" 
      }, function(data) { 
      console.log(data) 
      response(data); 
      }); 
     } 
    }); 

дает мне ответ:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q=test&dataType=jsonp. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). 

Мне просто не разрешено это делать?

Answer 1

смог понять это благодаря этому ответу: https://stackoverflow.com/a/6120260/929321

Изменено из .getJSON в .ajax и добавил dataType: 'jsonp'.

$.ajax({ 

    url: 'https://www.googleapis.com/moderator/v1/series?key='+key, 
    data: myData, 
    type: 'GET', 
    crossDomain: true, 
    dataType: 'jsonp', 
    success: function() { alert("Success"); }, 
    error: function() { alert('Failed!'); }, 
    beforeSend: setHeader 
}); 

Answer 2

установить хром плагин "Allow-Control-Allow-Origin"

Answer 3

Чтобы предотвратить Cross Site Scripting (XSS) атаки, XHR-х ограничены в областях, которые они могут обратиться. Но есть способы обойти это, а также обеспечить безопасность пользователей.

1. Направьте запрос через свой собственный домен, но это зависит от вашей стороны сервера архитектуры

2. Если развивается расширение браузера, как в хроме можно настроить манифест, чтобы связь

3. Или включить запросы кросс-происхождения путем модификации заголовков, отправленных сервером, как и в

   1. PHP
   2. Node.js

Я бы не советовал задавать пользователям устанавливать расширения, узурпировать эту очень важную политику

Answer 4

Попробуйте предоставленный API поиска youtube, получив учетные данные с консоли API. Вот ссылка, и вы можете попробовать его там, а также: https://developers.google.com/youtube/v3/docs/search/list

$.get(
    "https://www.googleapis.com/youtube/v3/search",{ 
    part : 'snippet', 
    q : 'batman', 
    key: 'YOUR_API_KEY'}, 
    function(data) { 
     console.log(data); 
    //do the manipulation here 
    } 
);