如何解决JavaScript中的401未授权错误？-HCRM博客

js 401 报错

在前端开发的奇妙世界里，咱新手小白经常会碰到一个让人有点头疼的家伙——js 401 报错，这到底是个啥玩意儿？别慌，今天就来好好唠唠，让你轻松搞懂它。

（图片来源网络，侵权删除）

先来说说啥是 401 报错，这个错误代码就像是一个来自服务器的小纸条，上面写着“嘿，你没有得到进入这个页面的许可哦”，就好比你去参加一个派对，门口的保安看了看你的邀请函，然后摇摇头说：“不好意思，你这邀请函不太对劲，不能进。”在网络世界里，这个“保安”就是服务器，而“邀请函”就是你发送的请求以及相关的凭证。

那为啥会出现这个报错呢？原因可不少，最常见的一种就是身份验证失败了，比如说，你访问的页面需要登录才能看，但是你的登录信息已经过期了，或者根本就没登录成功，这时候服务器就会给你甩个 401 报错，想象一下，你想打开自己家的保险柜，但是输错了密码，是不是就打不开啦？这和 401 报错的原理有点像。

还有一种可能是你发送的请求里缺少了必要的认证信息，有些网站要求你在请求头里带上特殊的“通行证”，比如一个特定的令牌（token），如果忘记带了这个“通行证”，服务器就会把你拒之门外，给出 401 的回应，就好比你去住酒店，前台要你出示身份证，你却忘带了，那肯定没办法入住呀。

怎么解决这个问题呢？咱们得分情况来。

如果是登录信息过期导致的，那就简单啦，重新登录一下就行，一般网站都会有登录界面，输入正确的用户名和密码，让服务器知道你是谁，它就会给你一个新的“通行证”，这样你就可以继续愉快地浏览页面了，比如说，你登录了一个在线学习平台，过了一段时间提示 401 报错，别着急，赶紧点登录按钮，重新输入账号密码，大概率就能解决问题。

要是缺少认证信息，那就得检查你的代码了，看看请求头里有没有正确地带上那个关键的令牌，不同的项目获取和设置令牌的方式可能不太一样，但通常都是在登录成功后，服务器会返回一个令牌给你，你要把这个令牌保存好，然后在后续的请求中一起发送出去，这就好比你去餐厅吃饭，服务员给了你一个取餐牌，你得拿着这个牌子才能拿到自己的饭菜，在代码里，你可以用一些工具或者方法来设置请求头，把令牌加进去。

（图片来源网络，侵权删除）

这里有个简单的小案例，假设我们用 JavaScript 的 fetch 函数来发送一个请求，正常情况下，我们可能会这样写：

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));




但是如果这个请求需要认证，我们就得改一改，加上请求头，像这样：

fetch('https://example.com/data', {
  headers: {
    'Authorization': 'Bearer your_token_here'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));


