訪問API時出現「Access-Control-Allow-Origin」請求錯誤

Question

我無法從Rescue Time API檢索數據。我正在使用jQuery get（）方法在JavaScript文件中發出請求。下面來看看在JavaScript的相關API GET請求：

$.get('https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview', function(data) { 
    // callback function code... 
}); 

的 「key = ########################」是包含我的API密鑰的參數。

運行腳本時（本地或在我的個人域名），我收到一個跨源錯誤：

XMLHttpRequest cannot load https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

據我所知，這種情況正在發生，因爲我要求的某些內容在不同的域比發出AJAX請求的人要多。話雖如此，我該如何解決這個問題？我已閱讀CORS MDN documentation，但無法解碼我需要遵循的可解決此問題的可操作步驟。

我需要一些可操作步驟。

Answer 1

使用的代碼從https://github.com/Rob--W/cors-anywhere/或類似建立一個CORS代理。

https://cors-anywhere.herokuapp.com/是運行代碼的公共實例，你可以使用它的方式是改變現有的代碼，以這樣的：

$.get('https://cors-anywhere.herokuapp.com/https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview', function(data) { 
    // callback function code... 
}); 

注意的是，如果你這樣做，你的重點將可能是暴露給那個https://cors-anywhere.herokuapp.com/實例的運營商。所以，如果這是一個問題，那麼請不要嘗試它，而是建立自己的代理在https://some.url.for.your.proxy和你的代碼更改爲：

$.get('https://some.url.for.your.proxy/https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview', function(data) { 
    // callback function code... 
}); 

無論哪種方式，其結果將是你的請求將通過指定CORS代理髮送，它將請求轉發到端點https://www.rescuetime.com/anapi/data…，然後接收響應。代理後端然後將Access-Control-Allow-Origin標題添加到響應，並最終將其返回到請求的前端代碼。

您的瀏覽器則可以讓您的前端代碼訪問的響應，因爲與Access-Control-Allow-Origin響應標頭，響應是瀏覽器看到的。否則，如果響應缺少Access-Control-Allow-Origin，瀏覽器將不會讓您的代碼訪問它。

像那樣的CORS代理是唯一的選擇，如果你想從前端JavaScript代碼在瀏覽器中運行的要求，並想消費從前端代碼的響應。否則，如果沒有使用這樣的代理，瀏覽器將阻止您的代碼訪問響應 - 因爲https://www.rescuetime.com/anapi/data… API端點本身不會發送必要的Access-Control-Allow-Origin響應標頭。

你唯一的選擇，否則是無法從前端代碼發出請求，而是從做任何後端服務器端代碼，您正在運行的請求。在這種情況下，中間沒有瀏覽器對請求實施交叉限制。