403错误：不同服务、不同令牌？秒懂解决方案！

2024-02-01 17:16:06

403 错误：前后端分离导致 Token 不一致

在日常 Web 开发中，403 错误可谓司空见惯。当用户尝试访问受限资源时，服务器会返回 403 Forbidden 状态码，表明用户没有足够的权限。403 错误的原因多种多样，其中前后端分离项目中，前后端使用不同 Token 进行验证便是常见场景之一。

问题根源：前后端 Token 不一致

在前后端分离项目中，前端负责用户界面展示和数据收集，后端负责处理业务逻辑。当用户向后端发起请求时，前端会将请求携带 Token 发送给后端。后端收到请求后，需要验证用户的身份。如果验证通过，后端会返回成功状态码和用户数据；如果验证失败，后端会返回 403 Forbidden 状态码，表明用户无权访问该资源。

问题就出在前后端 Token 不一致上。比如，前端使用 A Token，而后端却使用 B Token。当用户发起请求时，前端携带 A Token 发送给后端。后端收到请求后，却用 B Token 验证。由于 Token 不匹配，验证失败，后端便返回 403 Forbidden 状态码。

解决之道：前后端使用统一 Token

为了解决这一问题，前后端必须使用统一的 Token 进行验证。具体做法有两种：

前端向后端发送 A Token

这种方法较为简单，只需在前端代码中将 A Token 添加到请求头中，后端即可用 A Token 验证。

后端向前端发送 B Token

这种方法需要后端生成 B Token，并返回给前端。前端收到 B Token 后，需要将其存储在本地，并在后续请求中添加到请求头中。

403 错误的其他常见原因

除了前后端 Token 不一致之外，403 错误还有其他一些常见原因：

用户无权访问该资源。
资源不存在。
服务器配置错误。
服务器繁忙。

如何避免 403 错误？

为了避免 403 错误，我们可以采取以下措施：

确保用户拥有访问该资源的权限。
确保资源存在。
检查服务器配置是否正确。
确保服务器没有繁忙。

代码示例：前端发送 A Token

// 前端代码
const requestOptions = {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + tokenA,
  },
};

fetch('/api/protected', requestOptions)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

代码示例：后端生成并发送 B Token

// 后端代码
public ResponseEntity<String> login(@RequestBody User user) {
  // 验证用户身份

  // 生成 B Token
  String tokenB = generateToken(user);

  // 返回 B Token
  return ResponseEntity.ok(tokenB);
}