与webservice的CORS问题thumbnail.ws

我想写一个HTML页面，使用thumbnail.ws免费的webservice生成一个URL的快照。与webservice的CORS问题thumbnail.ws

这里是我的代码：

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: { 
 
\t \t  withCredentials: true 
 
\t \t  }, 
 
      success: function (response) { 
 
       var resp = JSON.parse(response) 
 
       alert(resp.status); 
 
      }, 
 
      error: function (xhr, status) { 
 
       alert("error !!!"); 
 
      } 
 
     }); \t

我有这样的错误控制台：

跨来源请求阻止：同源策略不允许在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？

我可以做些什么或者是否是服务器问题？

问候:)

来源

2017-03-08 Sam

尝试通过开放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/

我不不明白当我将它粘贴到浏览器中时，甚至当我使用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标题给浏览器看到的响应。

来源

2017-03-08 23:18:12 sideshowbarker

谢谢:)我刚刚添加到ajax calll：头文件：{'X-Requested-With'：'XMLHttpRequest'}， – Sam

与webservice的CORS问题thumbnail.ws

回答

相关问题