ReactJS使用fetch访问Qlik Cloud API无报错且返回数据异常如何解决

核心问题出在你请求配置里的mode: "no-cors"参数：

• 该模式下请求得到的是不透明响应（opaque response），浏览器会完全屏蔽你对响应状态码、响应头、响应体的访问权限，所以你不管是已认证还是未认证都读不到任何有效返回内容，状态码永远显示为0。
• 你直接用Chrome访问接口走的是正常导航请求，不受CORS规则限制，自然能拿到正确结果。

修复步骤 #

1. 直接删除mode: "no-cors"这行配置，fetch默认使用cors模式，才能正常读取跨域响应内容。
2. 登录你的Qlik Cloud管理后台，把React项目的完整域名（包含协议、端口，比如本地开发的http://localhost:3000）添加到Qlik-Web-Integration-ID对应的允许跨域源列表中。
3. 补充响应体读取逻辑，修改后的请求代码如下：

const reuurl = "https://nrtj9zddtsba1vo.eu.qlikcloud.com/api/v1/audits";
fetch(reuurl, {
  credentials: "include",
  headers: {
    "Qlik-Web-Integration-ID": webIntegrationId,
  },
})
.then(async function (response) {
  console.log(response.status); // 此时可正常读取200、401等真实状态码
  if (response.status === 401) {
    console.log("hey");
    // 未登录处理逻辑
    return;
  }
  if (response.ok) {
    const data = await response.json();
    console.log(data); // 这里就是你预期的接口返回对象
  }
})
.catch(function (error) {
  console.log(error);
});

如果去掉no-cors后出现CORS报错，只需检查Qlik后台的跨域源配置是否和你当前项目的访问域名完全匹配即可。

内容的提问来源于stack exchange，提问作者gangata arun