为什么在使用 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中文网其他相关文章！