来自YouTube搜索的Ajax自动完成，跨源请求被阻止

Question

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

我正在尝试在YouTube视频的搜索表单上进行自动完成。

我得到了您可以从这里使用的网址：Youtube API 搜索自动完成

我正在使用这个脚本（尽管我认为它与我遇到的问题没有太大关系）：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

安装一个 chrome 插件"允许-控制-允许-原产地"

Answer 2

为了防止跨站点脚本 （XSS） 攻击，XHR 在可以联系的域中受到限制。但是有一些方法可以解决这个问题，也可以保证用户的安全。

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

2. 如果开发浏览器扩展程序，例如在 chrome 中，则可以配置清单以允许通信

3. 或者，通过修改服务器发送的标头来启用跨源请求，如

   1. .PHP
   2. 节点.js

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

Answer 3

由于这个答案，能够弄清楚：https://stackoverflow.com/a/6120260/929321

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

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