ReactJS调用.NET API接收响应时抛出错误求助

从错误信息和代码来看，核心问题是前端尝试用JSON解析后端返回的纯字符串JWT令牌，导致JSON语法错误。

问题原因 #

你的.NET后端在验证成功后直接返回了纯字符串格式的JWT令牌：

return Ok(token);

而React前端使用response.json()方法解析响应，这个方法要求响应内容必须是合法的JSON格式，纯字符串不符合JSON语法规范，因此抛出Unexpected token 'e', "eyJhbGciOiJ..." is not valid JSON错误。

解决方案（二选一即可） #

方案1：修改后端返回JSON格式响应

将令牌包装在JSON对象中返回，这样前端可以正常用response.json()解析：

public IActionResult Login([FromBody] UserLogin userLogin)
{
    var user = Authenticate(userLogin);

    if (user != null)
    {
        var token = Generate(user);
        // 将令牌包装为JSON对象
        return Ok(new { Token = token });
    }
    else
    {
        return NotFound("User not found");
    }
}

前端无需修改，此时data.Token就是你的JWT令牌字符串。

方案2：修改前端接收纯文本响应

保持后端代码不变，将前端的response.json()替换为response.text()，直接接收纯字符串：

function getJWTToken(event) {
    event.preventDefault();

    const userCredentials = {
      email: user_email,
      password: user_password,
    };

    const url = Constants.API_URL_LOGIN;

    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(userCredentials),
    })
      // 替换为text()方法接收纯字符串
      .then((response) => response.text())
      .then((data) => {
        console.log("Success:", data); // data就是JWT令牌字符串
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  }

额外注意事项 #

如果后续遇到跨域相关错误，需要在.NET后端配置CORS中间件，允许前端域名的请求访问。

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