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

IT技术 javascript cors fetch-api
2021-01-23 14:49:55

当尝试使用 JS 解析 fetch Promise时,将模式设置为'no-cors'基于此答案但是,将模式设置为会'cors'导致:

从源“http://localhost:3000”获取“{endpoint}”的访问已被 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 inputreturn response.json(),但没有进一步的消息。我究竟做错了什么?

1个回答

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

它没有。你想看到回应。您看不到不透明的响应(这就是不透明响应的含义)。

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

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

你需要:

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

有关一般 CORS 的更多信息,请参阅此问题