React中使用Fetch API请求接口返回200状态码却无法获取响应数据如何解决

问题根因 #

你代码中配置的mode: 'no-cors'是导致报错的核心原因：

no-cors模式仅适用于不需要读取响应内容的跨域请求（比如无回调的埋点上报），该模式下浏览器会拦截所有响应内容，返回的response是完全为空的不透明对象，所以你调用response.json()解析空内容时就会触发Unexpected end of input的语法错误，同时也会出现找不到响应数据的提示。
Postman调用正常是因为Postman不受浏览器同源策略限制，不需要配置跨域相关参数，所以运行无异常。

解决步骤 #

• 第一步：删除fetch配置里的mode: 'no-cors'行
• 第二步：处理跨域问题，二选一即可：
  • 后端接口配置CORS响应头，允许你的React前端域名访问，开发阶段可临时设置Access-Control-Allow-Origin: *
  • 本地开发阶段可直接用React内置代理，在项目package.json中新增配置项"proxy": "http://kishansharma.pythonanywhere.com"，之后fetch请求地址改为'/login'即可，代理会自动转发请求绕过跨域限制
• 额外优化建议：不要直接拼接表单参数，避免参数含特殊字符导致传参错误，用URLSearchParams构造请求体更稳妥

修正后代码 #

let userLogIn = async function() {
  // 若使用代理方案，这里地址替换为 '/login'
  fetch('http://kishansharma.pythonanywhere.com/login', {
    method: 'POST', 
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    // 安全构造表单参数
    body: new URLSearchParams({
      email: emailId,
      password: password
    }),
  })
  .then(response => response.json())
  .then((data) => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });
}

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