Javascript Ajax从youtube搜索自动完成，跨源请求被阻止

编辑：我能够解决这个问题，谢谢你的时间

我正在尝试在youtube视频的搜索表单上自动完成

我从这里获得了您可以使用的url：

我正在使用这个脚本（尽管我认为它与我遇到的问题没有多大关系）：

我正在使用的代码

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

---

我只是不被允许这样做吗？

安装一个chrome插件“允许控制允许源代码”

为了防止跨站点脚本（XSS）攻击，XHR被限制在他们可以联系的域中。但也有一些方法可以保证用户的安全

通过您自己的域路由请求，但这取决于您的服务器端体系结构

如果开发浏览器扩展，如在chrome中，可以配置清单以允许通信

或者，通过修改服务器发送的头来启用跨源请求，如中所示

---

我不建议要求用户安装篡夺这一非常重要的策略的扩展

多亏了这个答案，我才能够找到它：

从.getJSON更改为.ajax，并添加了数据类型：“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
});

---

通过从API控制台获取凭据，尝试提供的youtube搜索API。这是链接，您也可以在那里尝试：

---

这是一个面向公众的网站，任何人都可以使用，我不能要求他们安装插件。你使用localhost做这个项目吗？不，我使用cloud9，所以它来自一个真正的域

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