调用GET接口遇401错误及SyntaxError语法错误，求排查解决

错误1：GET 请求返回401 Unauthorized #

原因分析 #

• 认证令牌key无效，或与服务器要求的格式、内容不匹配
• 请求的URL不正确，访问了需要有效认证的资源但令牌未通过校验
• 错误添加了Access-Control-Allow-Origin请求头：这个头是服务器响应头，前端发送该请求头会被浏览器忽略，甚至可能干扰正常请求

解决步骤 #

• 核对key的准确性：确认令牌大小写、特殊字符、有效期完全符合服务器提供的信息
• 验证URL的有效性：确认接口地址是服务器开放的合法端点
• 删除请求头中的"Access-Control-Allow-Origin": "*"，前端无需设置该头

错误2：Uncaught (in promise) SyntaxError: Unexpected end of input #

原因分析 #

这个错误是衍生错误：当请求返回401时，服务器通常会返回非JSON格式的响应（比如错误页面、空内容），此时执行await res.json()会因无法解析无效JSON而抛出语法错误。

解决步骤 #

在解析JSON前先校验响应状态，同时添加异常捕获逻辑，避免解析失败导致的报错：

修复后的完整代码 #

const URL = "你的有效接口地址";
const key = "正确的认证令牌";

const getData = async () => {
  try {
    const res = await fetch(URL, {
      method: "GET",
      headers: {
        "X-Auth-Token": key
      },
    });

    // 先判断请求是否成功
    if (!res.ok) {
      throw new Error(`请求失败: ${res.status} ${res.statusText}`);
    }

    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("请求出错:", err.message);
    // 单独处理JSON解析失败的情况
    if (err instanceof SyntaxError) {
      console.error("响应不是合法JSON，大概率是认证失败导致的错误返回");
    }
  }
};
getData();

内容的提问来源于stack exchange，提问作者Nagaprasad T S