javascript - 将模式设置为 'no-cors' 时使用 fetch 访问 API 时出错

Question

这个问题已经有答案了:

Handle response - SyntaxError: Unexpected end of input when using mode: 'no-cors' (6 个回答)

已关闭 4 年前。

当尝试使用 JS 解析 fetch Promise 时，将模式设置为 'no-cors'基于this answer 。但是将模式设置为 'cors'结果有:

Access to fetch at'{endpoint}'from origin 'http://localhost:3000' has been blocked by CORS policy:No 'Access-Control-Allow-Origin' header is present on the requestedresource. If an opaque response serves your needs, set the request'smode to 'no-cors' to fetch the resource with CORS disabled.

所以我在我的函数中写了这个:

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
      }));
    });
  }

这会导致以下错误 Uncaught (in promise) SyntaxError: Unexpected end of input对于 return response.json() ，但没有进一步的消息。我做错了什么？

Answer 1

If an opaque response serves your needs

事实并非如此。你想看到回应。您看不到不透明响应(这就是不透明响应的含义)。

no-cors 模式意味着，如果浏览器必须执行任何需要 CORS 许可的操作，它将默默失败，而不是抛出错误。

因此，它默默地无法获取响应，然后尝试将其解析为 JSON(这会引发不同的错误)。

您需要:

• 不使用no-cors模式
• 服务器使用 CORS 授予权限

参见this question for more information about CORS in general .