我使用JavaScript收到API的404 HTTP錯誤，但未在終端中收到

Question

我正在使用此處記錄的Pons詞典API： https : //en.pons.com/assets/docs/api_dict.pdf當我在Mac終端中使用get請求時，它起作用了，但是在我的javascript文件中使用XMLHttpRequest時，它卻不起作用（在我的瀏覽器中對其進行測試時，如下所示。 它總是給我一個404錯誤，然后指出“ CORS策略阻止了對來自源'null'的XMLHttpRequest的訪問' https://api.pons.com/v1/dictionary?q=casa&l=dees '預檢請求未通過訪問控制檢查：它沒有HTTP正常狀態。”

有任何想法嗎？

我嘗試過發出不需要我的X-Secret（憑證）的請求並且它可以工作，但是一旦我設置了X-Secret頭，它就會引發404錯誤。 我需要為大多數請求類型設置此標題。 這是我的代碼。 我已經在X-Secret標頭中檢查了我的憑據。

var request = new XMLHttpRequest()

let url = new URL('https://api.pons.com/v1/dictionary');
url.searchParams.set('q', 'casa');
url.searchParams.set('l', 'dees');

request.open('GET', url);
//request.withCredentials = true;
request.setRequestHeader("X-Secret", "***");
request.setRequestHeader("Access-Control-Allow-Origin", "*");
request.setRequestHeader("Access-Control-Allow-Credentials", "true");
request.setRequestHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
request.setRequestHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization");
request.send()

request.onload = function() {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response)
  if (request.status >= 200 && request.status < 400) {
    console.log(data)
  } else {
    console.log('error')
  }
}

Answer 1

CORS是“跨域資源共享”； 特別是，它用於指代阻止不同域之間的請求的策略。 在這種情況下，XHR將發送“預檢請求”，即帶有動詞OPTIONS的請求（而不是GET，POST等），以確保服務器將接受實際請求。 每當您使用非標准（和一些標准但可選）標頭時，它將執行此操作。 預檢請求返回為404； 服務器不支持該端點的OPTIONS。

解決CORS的方法是使用代理。 也就是說，在您的域上有一個后端腳本（在Node，PHP中，無論如何），該腳本會將請求發送到另一個API服務器並回顯其響應。 CORS僅適用於AJAX請求，不適用於后端請求，因此可以解決問題，這是公認的技術。