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

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

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

Answer 2

感谢这个答案：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 3

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

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

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

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

   1. PHP
   2. Node.js

我不建议要求用户安装篡改这一非常重要政策的扩展程序

Answer 4

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