将模式设置为“no-cors”时使用 fetch 访问 API 时出错 [重复]

Question

当尝试使用 JS 解决 fetch promise 时，将模式设置为 'no-cors' 基于 this answer。但是将模式设置为 'cors' 会导致：

访问获取 '{端点}' 来自原产地“http://localhost:3000”已被 CORS 政策阻止： 请求中不存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式为“no-cors”以获取禁用 CORS 的资源。

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

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

如果不透明的响应满足您的需求

它没有。你想看到响应。你看不到不透明的响应（这就是不透明响应的意思）。

no-cors 模式意味着如果浏览器必须做任何需要 CORS 许可的事情，它会静默失败而不是抛出错误。

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

你需要：

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

见this question for more information about CORS in general。