如何在JavaScript中使用POST方法及Bearer令牌调用API？代码求助

咱们来一步步梳理你这段代码里的问题，主要有几个关键地方需要调整：

1. Authorization头的语法错误 #

你写的"Authorization":Bearer + ${token}``是明显的语法问题——模板字符串里不需要额外的+号，这样会导致请求头变成Bearer + [你的token值]，服务器根本识别不了正确的Bearer令牌格式。正确的写法应该直接把变量嵌入模板字符串：

"Authorization": `Bearer ${token}`

2. Token解析的潜在风险 #

你用JSON.parse(get)解析localStorage里的token，但要确认localStorage中存储的确实是JSON格式的字符串。如果你的token本身就是普通字符串（比如后端直接返回的token字符串，没有用JSON包裹），那JSON.parse会直接报错，导致后续代码无法执行。可以加个简单的错误捕获：

let token = localStorage.getItem("token");
try {
  token = JSON.parse(token);
} catch (e) {
  console.error("Token解析失败，请检查localStorage存储格式:", e);
  return; // 解析失败就终止函数
}

3. 请求Body的多余尾逗号 #

你在body的state: account_state.value,后面加了一个多余的逗号，虽然现代浏览器支持这种写法，但在一些旧环境或者严格模式下可能会抛出语法错误，建议去掉：

body: JSON.stringify({
  city: account_city.value,
  district: account_dis.value,
  state: account_state.value // 去掉最后一个逗号
})

4. 缺失的关键请求头与错误处理 #

Fetch API只有在网络错误时才会触发reject，像401（令牌无效）、404这类HTTP错误码不会自动进入catch块，而且你还漏掉了告诉服务器请求体是JSON格式的关键头：

修正后的完整代码 #

function myfun(){
  // 处理token获取与解析
  let token = localStorage.getItem("token");
  try {
    token = JSON.parse(token);
  } catch (e) {
    console.error("Token解析失败:", e);
    return;
  }

  // 确保url变量已正确定义
  const url = "你的API实际地址"; // 替换成真实的API URL

  // 确保DOM元素存在（根据实际页面结构调整选择器）
  const account_city = document.getElementById("account_city");
  const account_dis = document.getElementById("account_dis");
  const account_state = document.getElementById("account_state");

  if (!account_city || !account_dis || !account_state) {
    console.error("无法找到表单元素，请检查DOM结构");
    return;
  }

  fetch(url, {
    method: 'POST',
    headers: {
      "Authorization": `Bearer ${token}`,
      "Content-Type": "application/json" // 必须添加这个头，服务器才能正确解析JSON
    },
    body: JSON.stringify({
      city: account_city.value,
      district: account_dis.value,
      state: account_state.value
    })
  })
  .then((res) => {
    // 手动检查HTTP响应状态
    if (!res.ok) {
      throw new Error(`请求失败！状态码: ${res.status}`);
    }
    return res.json();
  })
  .then(data => console.log("请求成功返回数据:", data))
  .catch(err => console.error("请求出错:", err));
}

最后再确认两个细节：

• 确保account_city等变量确实指向了页面上的DOM元素，比如通过id或其他选择器正确获取，不然会出现value属性不存在的错误。
• 检查你的token是否有效，有没有过期——如果服务器返回401错误，大概率是令牌本身的问题。

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