Question

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

我正在尝试在youtube视频的搜索表单上进行自动填充。

我从这里获得了您可以使用的网址：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

安装Chrome插件“Allow-Control-Allow-Origin”

Answer 2

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

通过您自己的域路由请求，但这取决于您的服务器端架构
如果开发浏览器扩展程序，例如在chrome中，则可以配置清单以允许通信
或者，通过修改服务器发送的标头来启用跨源请求，如
1. PHP
2. Node.js

我不建议让用户安装篡夺这个非常重要的政策的扩展程序

Answer 3

由于这个答案，我能够弄清楚：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 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
  }
);

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

4 个答案: