React JS报错：通过sessionStorage传递用户令牌时JSON意外结束

我仔细看了你的代码和问题描述，登录页能成功获取Token并存入sessionStorage，但落地页读取不到导致请求失败，手动粘贴Token却能正常工作，问题确实出在Token的存储或读取环节，下面帮你一步步排查修复：

核心问题分析 #

1. Token存储方式错误 #

在登录页的fetchData函数中，你把整个API响应对象data转成JSON字符串存入了sessionStorage：

sessionStorage.setItem('token', JSON.stringify(data))

但你需要的是响应中的具体Token字段（比如API返回的token或access_token），而不是整个对象。后续读取时直接用sessionStorage.token拿到的是字符串化的对象（比如"{\"token\":\"xxx\"}"），不是实际的Token值，这会导致请求头的Authorization格式错误。

2. Token读取逻辑不一致 #

登录页的requestUserInfo函数中，你先JSON.parse读取Token，但拼接请求头时又直接用sessionStorage.token，这两个操作是矛盾的：

var token = JSON.parse(sessionStorage.getItem('token'));
// 这里却用了未解析的sessionStorage.token
Authorization: 'Bearer ' + sessionStorage.token

3. 同源策略限制（测试环境可能的问题） #

你用两个独立的测试页面测试时，它们的运行环境如果属于不同源（比如不同的子域名或iframe），sessionStorage是同源共享的，跨源情况下无法读取到另一个页面存储的Token。这个问题在本地同域部署时会消失，但测试时需要注意。

具体修复步骤 #

步骤1：修正登录页的Token存储 #

先确认API返回的响应结构，比如假设API返回的是：

{ "access_token": "your-actual-token-string" }

修改fetchData函数，只存储Token字段：

.then(data => {
  this.setState({ data: data })
  // 替换成API实际返回的Token字段名，比如access_token
  sessionStorage.setItem('token', data.access_token)
})

不需要JSON.stringify，因为Token本身就是字符串。

步骤2：修正登录页的requestUserInfo函数 #

直接读取sessionStorage中的Token字符串，不需要解析：

requestUserInfo() {
  const token = sessionStorage.getItem('token');
  return fetch('http://myapiauth:11111/api/auth', {
    method: 'GET',
    headers: new Headers({
      Authorization: 'Bearer ' + token
    }),
  })
  .then((response) => response.json());
}

步骤3：修正落地页的Token读取 #

同样直接读取Token字符串，确保请求头正确：

componentDidMount() {
  const token = sessionStorage.getItem('token');
  fetch('http://myapiclients:22222/api/clients', {
    method: 'GET',
    headers: {
      'Content-type': 'application/json',
      'Authorization': 'Bearer ' + token
    },
  })
  .then(results => results.json())
  .then(data => this.setState({ data: data }))
}

步骤4：测试环境的同源问题解决 #

如果是在跨源环境测试，建议把登录和落地页的代码合并到同一个项目中，或者在本地搭建同域环境测试，避免跨源导致sessionStorage无法共享的问题。

额外验证建议 #

• 在落地页的componentDidMount开头添加console.log(sessionStorage.getItem('token'))，确认是否能读取到正确的Token值。
• 检查浏览器的开发者工具（Application -> Session Storage），确认Token是否正确存储。

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