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

问题描述

当尝试使用 JS 解决获取承诺时，根据 'no-cors'access-control-allow-origin-header-using-html5-fetch-api">这个答案.但是将模式设置为 'cors' 会导致:

When trying to resolve a fetch promise with JS is set the mode to 'no-cors' based on this answer. However setting the mode to 'cors' results in having:

访问获取'{端点}'来自原产地http://localhost:3000"已被 CORS 政策阻止:请求中不存在Access-Control-Allow-Origin"标头资源.如果不透明的响应满足您的需求，请设置请求的模式为no-cors"以获取禁用 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 requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

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

So I wrote this in my function:

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 for return response.json()，但没有进一步的消息.我做错了什么?

This results in following error Uncaught (in promise) SyntaxError: Unexpected end of input for return response.json(), but with no further message. What am I doing wrong?

推荐答案

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

If an opaque response serves your needs

它没有.你想看到响应.你看不到不透明的响应(这就是不透明响应的意思).

It doesn't. You want to see the response. You can't see an opaque response (that is what opaque response means).

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

no-cors mode means that if the browser has to do anything that requires permission from CORS, it will fail silently instead of throwing an error.

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

So it is silently failing to get the response, then trying to parse that nothing as JSON (which throws a different error).

你需要:

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

请参阅此问题了解有关 CORS 的一般信息.

这篇关于将模式设置为“no-cors"时使用 fetch 访问 API 时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！