在 API 獲取期間總是收到此 CORS 錯誤

Question

我正在嘗試使用 Axios 獲取數據，（網址：http: //3.134.99.170 : 4000/upcomingMovies ）

我總是收到此錯誤：（從源 'http://localhost:9000' 訪問 XMLHttpRequest at 'http://3.134.99.170:4000/upcomingMovies' 已被 CORS 策略阻止：對預檢請求的響應沒有通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”標頭。）

我也嘗試過使用 fetch 和 superagent，但再次出現同樣的錯誤。

另外，這是我的代碼：

axios({
      method: "GET",
      url: "http://3.134.99.170:4000/upcomingMovies",
      headers: {
        'Access-Control-Allow-Headers': 'Content-Type, Accept, Access-Control-Allow-Origin, Access-Control-Allow-Methods',
        'Access-Control-Allow-Origin' : '*',
        'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
        "Content-type": "application/json"
      }
    })
    .then((response) => {
      setUpcomingMovies(response)
    })
    .catch((error) => {
      console.log(error)
    })

Answer 1

如果您只需要運行和測試您的代碼，您可以在瀏覽器中使用 no-cors 模式（如此處所述在 Chrome 中禁用同源策略）或使用瀏覽器的一些擴展程序，這會關閉 cors 限制模式（例如https:/ /chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf ）以避免該問題。 但是如果你需要避免生產中的問題，你需要后端支持，正如senthil Balaji之前提到的