Ajax autocomplete from youtube search, Cross-Origin Request Blocked

Question

EDIT: I was able to solve this, thanks for you time

I am trying to make an autocomplete on a search form for youtube videos.

I got the url you can use from here: Youtube API search auto-complete

And I'm using this script (though I don't think it has much to do with the problem I'm having): https://goodies.pixabay.com/javascript/auto-complete/demo.html

code I'm using

  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);
          });
      }
  });

gives me the response:

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).

Am I just not allowed to do this?

score 0 · Answer 1 · answered Jan 20 '17 at 14:22

0

install a chrome plugin "Allow-Control-Allow-Origin"

answered Jan 20 '17 at 14:22

Rex

137
2
12

This is a public facing website available to anyone, I can't require them to install a plugin. – stackers Jan 20 '17 at 14:24
are you using localhost doing this project? – Rex Jan 20 '17 at 14:28
No I'm using cloud9 so it's coming from a real domain – stackers Jan 20 '17 at 14:29

score 0 · Answer 2 · edited May 23 '17 at 10:29

To prevent Cross Site Scripting (XSS) attacks, XHR's are limited in the domains that they can contact. But there are ways around this that also keep users secure.

Route the request through your own domain, but this depends on your server side architecture
If developing a browser extension, like in chrome it is possible to configure the manifest to allow the communication
Or, enable cross-origin requests by modifying headers sent by the server, like in
1. PHP
2. Node.js

I would not suggest asking users to install extensions that usurp this very important policy

score 0 · Accepted Answer · edited May 23 '17 at 12:34

Was able to figure it out thanks to this answer: https://stackoverflow.com/a/6120260/929321

Changed from .getJSON to .ajax and added 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
});

score 0 · Answer 4 · answered Jan 20 '17 at 14:53

Try the provided youtube search API by getting the credentials from the API console. Here is the link and you can try it out there as well : 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
  }
);

Ajax autocomplete from youtube search, Cross-Origin Request Blocked

4 Answers4