如何修复JWT授权流程中的401（未授权）错误？

1. 修复Redux Action调用错误 #

你的App组件中，useEffect里直接调用checkAuth()，但这是Redux的action creator，必须通过dispatch触发，否则内部异步请求不会执行：

useEffect(() => {
    dispatch(checkAuth()) // 补充dispatch调用
}, [dispatch]) // 依赖项添加dispatch

同时，checkAuth函数的try-catch位置错误，无法捕获异步请求异常，需将try-catch移至async函数内部：

export const checkAuth = () => {
    return async dispatch => {
        try {
            const response = await axios.get(`http://localhost:5000/api/refresh`, {withCredentials: true})
            dispatch({
                type: SET_USER,
                payload: response.data
            })
        } catch (e) {
            console.log(e.response?.data?.message);
        }
    }
}

2. 正确配置后端CORS #

Postman不受浏览器CORS规则限制，但前端请求必须严格符合跨域配置。替换原CORS配置为：

app.use(cors({
    origin: 'http://localhost:3000', // 明确指定前端地址
    credentials: true, // 允许携带Cookie
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
}));

若后端使用框架自动处理OPTIONS预检请求，需确保该请求能被正常放行。

3. 检查Refresh Token的Cookie配置 #

• 确认后端在登录/注册时，将refresh token设置为HttpOnly、SameSite=None（跨域场景）、Secure（生产环境）类型的Cookie，确保浏览器能正确存储并在请求时携带。
• 前端请求/refresh时，withCredentials: true必须生效，你的代码已配置，但需确保没有其他axios实例覆盖该设置。

4. 修正Axios拦截器细节 #

响应拦截器中可改用已配置好的$api请求/refresh，保持配置统一：

// 替换原axios.get调用
const response = await $api.get('/refresh')

同时将状态判断改为严格相等===，避免类型匹配问题：

if (error.response.status === 401 && error.config && !error.config._isRetry)

5. 浏览器调试验证 #

• 打开开发者工具Network标签，查看/refresh请求的Request Headers，确认Cookie字段包含refresh token。
• 检查Response Headers，确认Access-Control-Allow-Origin为http://localhost:3000、Access-Control-Allow-Credentials为true。
• 查看控制台输出，获取更详细的错误提示信息。

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