無法使用提取API提取數據

Question

我無法使fetch（）API正常工作。 我有強烈的感覺，我做錯了什么。

我有一個運行在PORT 3005上的簡單快遞服務器，該服務器以json格式返回數據，還有一個在PORT 3000上運行的react.js客戶端。

我正在使用fetch()向GET請求發送到http://localhost:3005/api但正在控制台上獲取這些消息

跨域請求被阻止：同源策略禁止讀取位於http：// localhost：3005 / api的遠程資源。 （原因：CORS標頭“ Access-Control-Allow-Origin”缺失）。

TypeError：嘗試獲取資源時出現NetworkError。

我添加了標題，並閱讀了類似的問題，但仍然無法正常工作，並且仍收到相同的消息。

我究竟做錯了什么？ （這是代碼）

let url = 'http://localhost:3005/api';
    fetch(url, { 
      method: 'GET',
      headers:{
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials':true,
        'Access-Control-Allow-Methods':'POST, GET'
      }
    }).then(response => response.json)
    .then(data => console.log(data))

我過去曾多次遇到此問題，通常只使用axios。 但是這次，我想讓fetch()工作...！

Answer 1

您的服務器端點需要支持Access-Control-Allow-Origin標頭，而不僅僅是客戶端。

一般流程為：

1. 客戶端正在執行飛行前請求，以檢查服務器是否支持所請求的cors策略。

2. 服務器接收預檢並在認為允許的請求時使用正確的標題進行應答。

3. 客戶端收到答案，並通過包含的標頭知道是否允許實際請求。

4. （根據您的情況）如果服務器未返回標頭，則瀏覽器將不允許實際的調用並給出您遇到的錯誤。

因此，為了解決該問題，您需要修改服務器代碼以為預檢請求返回正確的標頭。

另請參閱此stackoverflow 答案 。

看到這個鏈接 。 專門查看有關預檢請求的部分。