Question

我想编写一个HTML页面，使用thumbnail.ws free webservice生成URL的快照。

这是我的代码：

＆＃13;

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

＆＃13;

＆＃13; 我在控制台中出现此错误：

阻止跨源请求：同源策略禁止在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'。

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

我可以做某事还是服务器问题？

问候：）

Answer 1

尝试通过https://cors-anywhere.herokuapp.com/开放式CORS代理发送请求：

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/

中的代码设置自己的代理

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

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

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

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。

要知道的关键点是，您的浏览器阻止了请求，让浏览器取消阻止它的唯一方法是让响应包含Access-Control-Allow-Origin标头。< / p>

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

与webservice thumbnail.ws的CORS问题

1 个答案: