JSX调用API报JSON输入意外结束错误，是否需实现Bearer Token？

没错，你必须在JSX的请求里添加Bearer Token——这正是问题的根源！Postman里你手动带上了Token，服务端验证通过后返回了合法的JSON；但你JSX里的请求没带Token，服务端很可能返回了401错误页面（HTML格式）或者空响应，这就导致你的代码在解析JSON时触发了Unexpected end of JSON input错误——因为你解析的根本不是有效的JSON数据。

下面给你两种常用请求方式的实现示例，核心都是在请求头里加入Authorization Token：

1. 使用原生fetch API #

// 先获取Token，这里假设你把Token存在localStorage里（也可以从Redux/Context等状态管理工具中取）
const authToken = localStorage.getItem('userAuthToken');

fetch('你的目标API地址', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${authToken}`, // 核心：按Bearer格式添加Token
    'Content-Type': 'application/json'
  }
})
.then(response => {
  // 先校验响应状态，避免非成功状态下解析JSON失败
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  return response.json();
})
.then(data => {
  console.log('成功获取数据:', data);
  // 在这里处理你的业务逻辑，比如更新组件状态
})
.catch(error => {
  console.error('请求出错:', error);
  // 可以在这里处理错误，比如Token过期时跳转登录页
});

2. 使用axios（React项目常用请求库） #

如果你的项目里用了axios，代码会更简洁：

import axios from 'axios';

const authToken = localStorage.getItem('userAuthToken');

axios.get('你的目标API地址', {
  headers: {
    'Authorization': `Bearer ${authToken}`
  }
})
.then(response => {
  console.log('成功获取数据:', response.data);
  // 处理业务逻辑
})
.catch(error => {
  console.error('请求出错:', error);
  // 错误处理，比如401时引导用户重新登录
});

几个关键注意点： #

• Token格式：Authorization头的格式必须是Bearer 你的Token字符串，注意Bearer后面有一个空格，别漏了！
• Token存储：如果是用户登录后拿到的Token，建议存在localStorage（持久化）或sessionStorage（会话级），或者用React Context/Redux做全局状态管理，方便在各个组件中调用。
• 错误处理：一定要先校验响应状态（比如response.ok），再去解析JSON。如果Token无效/过期，服务端会返回401状态码，这时候可以在catch块里做对应的处理（比如跳转到登录页面）。

你可以在浏览器开发者工具的Network标签里，查看请求的Request Headers是否包含正确的Authorization字段，以及响应内容是否为合法JSON，这样就能快速验证是否解决了问题。

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