ajax 图像搜索 API (Google) 中的跨源域阻止

Question

我是 ajax 的新手。我尝试使用 ajax get 方法进行 Google 图像搜索（已弃用 API）。出于某些原因，我的客户更喜欢弃用 API 而不是自定义搜索。当我提出请求时，它说

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ajax.googleapis.com/ajax/services/search/images?v=1.0&rsz=8&start=0&imgsz=xlarge,large&q=apple. This can be fixed by moving the resource to the same domain or enabling CORS.

但是当我通过浏览器调用它时 url 它响应完美。

我的ajax请求

$.ajax({
        type : "GET",
        url : "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&rsz=8&start=0&imgsz=xlarge,large&q=apple",
        beforeSend : function(xhr) {
            xhr.setRequestHeader('Referer', 'http://www.mydomainexample.com');
        },
        success : function(result) {
            console.log(result) 
        },
        error : function(error) {
            console.log(error) 
        }
    })

如有错误请见谅。请帮帮我。

Answer 1

Cross-Origin Request Blocked 就是这样，这是一个防止从源以外的地方获取源的策略。你实际上是在伪造 XMLHttpRequest HTTP Referer Header。有了这个： xhr.setRequestHeader('Referer', 'http://www.mydomainexample.com'); 并且您不得欺骗引荐来源网址，因为它们是安全模型的重要组成部分。

至少你要找的是跨域资源共享

在此处阅读有关 CORS 的信息：http://enable-cors.org/server.html

Answer 2

啊，CORS。这么多奇怪的错误的来源。

引擎盖下实际发生的是预检 OPTIONS 请求，其中包含一个 Origin header。此 Origin 是您当前所在的域和协议。服务器 returns 一组 CORS headers（Access-Control-Allow-Origin 和 co），然后告诉浏览器是否应该允许它们完成请求。

如果 Origin 和 CORS headers 不匹配，它会抛出您遇到的错误。在浏览器中没有办法解决这个问题，如果你真的想让它工作，你将不得不代理 API。

ajax 图像搜索 API (Google) 中的跨源域阻止

Cross Origin Domain Blocking in ajax Image Search API (Google)

jquery

ajax

google-search-api

google-image-search