webservice thumbnail.ws 的 CORS 问题

Question

我想编写一个使用 thumbnail.ws 免费网络服务生成 URL 快照的 HTML 页面。

这是我的代码：

 var myurl = "http://api.thumbnail.ws/api/API_KEY/thumbnail/get?url=http://maps.google.com/?q=36.82,10.17&width=800"
 $.ajax({
            url: myurl,
            crossDomain: true,
            xhrFields: {
		       withCredentials: true
		    },
            success: function (response) {
                var resp = JSON.parse(response)
                alert(resp.status);
            },
            error: function (xhr, status) {
                alert("error !!!");
            }
        });	

我在控制台中有这个错误：

跨域请求被阻止：同源策略不允许读取位于http://api.thumbnail.ws/api/API_KEY/thumbnail/get?url=http://maps.google.com/?q=36.82,10.17&width=800 的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

我不明白为什么当我将相同的 URL 粘贴到浏览器中时，即使我使用 curl 编写 PHP 客户端，但在使用 AJAX 调用时却没有？

我可以做点什么还是服务器问题？

问候:)

Answer 1

尝试通过开放的 CORS 代理发送您的请求，例如 https://cors-anywhere.herokuapp.com/：

var myurl = "https://cors-anywhere.herokuapp.com/http://api.thumbnail.ws/api/API_KEY/thumbnail/get?url=http://maps.google.com/?q=36.82,10.17&width=800"

或者使用https://github.com/Rob--W/cors-anywhere/中的代码设置您自己的代理

我不明白为什么当我将相同的 URL 粘贴到浏览器中时，甚至当我使用 curl 编写 PHP 客户端时，为什么相同的 URL 有效，但在使用 AJAX 调用时却没有？

那是因为如果你用 curl 写一个 PHP 客户端，你不会遇到跨域限制，而当你将 URL 粘贴到浏览器地址栏时，你也不会遇到任何跨域限制。

但是，如果您的 JavaScript 代码在浏览器的客户端上运行，并且它使用 jQuery $.ajax(…) 或其他一些库函数发出跨域请求，或者直接调用 XHR/Fetch，那么就不一样了——浏览器强制执行的原始策略，因此默认情况下浏览器会阻止它。

详情请见https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。

要知道的关键点是您的浏览器阻止了请求，让浏览器解除阻止的唯一方法是使 响应 包含 Access-Control-Allow-Origin 标头。

http://api.thumbnail.ws 似乎没有发送Access-Control-Allow-Origin 标头，因此使浏览器允许您的代码处理来自该响应的唯一方法是通过像https://cors-anywhere.herokuapp.com/ 这样的开放服务或通过您的自己的代理——将所需的Access-Control-Allow-Origin 标头添加到浏览器看到的响应中。