javascript - webservicethumbnail.ws 的 CORS 问题

Question

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

这是我的代码:

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

我在控制台中遇到此错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.thumbnail.ws/api/API_KEY/thumbnail/get?url=http://maps.google.com/?q=36.82,10.17&width=800. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

我不明白为什么当我将相同的 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/ 中的代码设置您自己的代理

I don't understand why the same URL is working when I paste it in the browser and even when I write a PHP client using curl, but not when called using AJAX?

这是因为，如果您使用curl编写PHP客户端，则不会遇到跨域限制，并且当您将URL粘贴到浏览器地址栏中时，也不会遇到任何跨域限制。

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

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

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

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