與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

回答

相關問題