為什麼在使用 fetch 時設定 \'mode: \'no-cors\'\' 會拋出語法錯誤？

將模式設為“no-cors”時使用Fetch 存取API 時出錯

在嘗試使用JavaScript 解析fetch Promise 期間，將模式設定為“no”基於先前建議的“-cors”導致錯誤。

當模式設定為「cors」時，它會產生 CORS 策略阻止錯誤。根據建議，將模式更改為“no-cors”以禁用CORS 並以不透明方式獲取資源會導致意外錯誤：

Uncaught (in promise) SyntaxError: Unexpected end of input for return response.json()

解釋

此問題的根本原因錯誤在於函數中：

<code class="javascript">search() {
    return fetch(`${baselink}${summonerEndpoint}${summoner}${apikey}`, {mode: 'no-cors'}).then(response => {
      return response.json()
    }).then(jsonResponse => {
      console.log(jsonResponse);
      if (!jsonResponse.info) {
        return [];
      }
      return jsonResponse.info.items.map(info => ({
        id: info.id,
        accountId: info.accountId,
        name: info.name,
        profileIconId: info.profileIconId,
        revisionDate: info.revisionDate,
        summonerLevel: info.summonerLevel
      }));
    });
  }</code>

將模式設為「no-cors」表示如果瀏覽器遇到任何與CORS 相關的問題，瀏覽器應該默默地失敗。在這種情況下，伺服器不會使用 CORS 授予權限，且請求會默默失敗。

因此，後續嘗試將空響應解析為 JSON（使用 response.json()）會拋出 SyntaxError，如下所示沒有要解析的資料。

解決方案

要解決此問題，有兩個主要要求：

1. 停用「no-cors」模式： 從獲取請求中刪除“mode: 'no-cors”。
2. 在伺服器上啟用 CORS： 確保伺服器以適當的 Access-Control-Allow 進行回應-Origin 標頭，用於授予跨來源請求權限。

按照以下步驟，應用程式可以成功取得數據，而不會遇到任何與 CORS 相關的錯誤。

以上是為什麼在使用 fetch 時設定 \'mode: \'no-cors\'\' 會拋出語法錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！