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

Posted 2023-02-27

【中文标题】在将模式设置为“no-cors”时使用 fetch 访问 API 时出错 [重复]

【英文标题】：Error when accessing API with fetch while setting mode to 'no-cors' [duplicate]

【发布时间】：2019-04-25 19:16:51

【问题描述】：

当尝试使用 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
      ));
    );
  

这导致return response.json() 出现以下错误Uncaught (in promise) SyntaxError: Unexpected end of input，但没有更多消息。我做错了什么？

【参考方案1】：

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

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

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

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

你需要：

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

见this question for more information about CORS in general。