前后端分离项目中使用axios进行请求跨域的解决方案

2022-11-27 14:10:39

前后端分离与跨域问题详解：如何使用axios和双token无感刷新

跨域请求的困境

在现代网络应用中，前后端分离已成为主流开发模式。然而，当前端和后端部署在不同的服务器上时，就会产生跨域问题。由于浏览器的同源策略，前端无法直接向后端发起请求，这可能会导致开发的复杂性和用户体验的受损。

axios：跨域请求的救星

为了解决跨域问题，axios应运而生。axios是一个基于Promise的HTTP库，它提供了跨域请求的简便方法。使用axios，你可以轻松地向后端发起跨域请求，而无需担心同源策略的限制。

双token无感刷新：无缝的用户体验

双token无感刷新是一种机制，它可以通过自动刷新到期令牌来确保用户的登录状态。它使用两个令牌：accessToken和refreshToken。accessToken具有较短的有效期（例如，几分钟或几小时），用于验证用户身份。refreshToken具有较长的有效期（例如，几天或几周），用于刷新accessToken。

使用双token无感刷新机制，当accessToken过期时，前端会自动向后端发起请求，使用refreshToken刷新accessToken。这个过程对用户是无感的，他们可以继续使用系统，而无需重新登录。

双token无感刷新机制的实现步骤

以下是实现双token无感刷新机制的步骤：

服务器端颁发accessToken和refreshToken： 在用户登录时，服务器颁发accessToken和refreshToken。
前端存储accessToken和refreshToken： 将accessToken和refreshToken存储在前端，例如localStorage中。
在前端发起请求时携带accessToken： 在向后端发起请求时，将accessToken添加到请求头中。
在前端监听accessToken的过期时间： 在accessToken过期前，发起刷新请求，使用refreshToken刷新accessToken。

示例代码

服务器端（Node.js）：

// 在用户登录时颁发accessToken和refreshToken
const accessToken = jwt.sign({ userId: userId }, 'secretKey', { expiresIn: '1h' });
const refreshToken = jwt.sign({ userId: userId }, 'secretKey', { expiresIn: '7d' });

// 将accessToken和refreshToken返回给前端
res.json({ accessToken, refreshToken });

前端（JavaScript）：

// 将accessToken和refreshToken存储在localStorage中
localStorage.setItem('accessToken', accessToken);
localStorage.setItem('refreshToken', refreshToken);

// 在发起请求时，将accessToken添加到请求头中
axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;

// 在accessToken过期前1分钟，发起刷新请求
setTimeout(refreshAccessToken, (accessTokenExpiresIn - 60) * 1000);

// 刷新accessToken的函数
const refreshAccessToken = () => {
  const refreshToken = localStorage.getItem('refreshToken');

  axios.post('/api/refresh-token', { refreshToken })
    .then(response => {
      // 将新的accessToken存储在localStorage中
      localStorage.setItem('accessToken', response.data.accessToken);
    })
    .catch(error => {
      // 处理错误
    });
};