Docker部署本地项目时注册接口返回401 Unauthorized求助

问题概述 #

注册操作时服务器返回HTTP/1.1 401 Unauthorized，该问题仅在Docker启动本地项目时出现，本地Git克隆直接启动项目则正常运行。请求头中Authorization字段为Bearer null。

关键代码分析 #

从提供的代码来看，核心问题出在请求拦截器的逻辑：

• api.js中的请求拦截器会给所有请求强制添加Authorization头，值为Bearer ${getAccessToken()}
• getAccessToken()从localStorage获取accessToken，未登录时该值为null，导致请求头变为Bearer null
• 服务器对注册接口的请求头校验逻辑，在Docker环境下会拒绝带有Bearer null的请求，而本地直接启动时可能因环境差异未触发该校验

另外，api.js中存在代码顺序错误：先给未定义的$api_id.baseURL赋值，再创建axios实例，这会导致运行时错误，可能间接影响请求逻辑。

解决方案 #

1. 修改请求拦截器，避免无效Authorization头 #

修改api.js中的请求拦截器逻辑，仅当存在有效token时才设置Authorization头：

$api_id.interceptors.request.use((config) => {
    const token = getAccessToken();
    // 仅当token存在且不为null/undefined时，设置Authorization头
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    // 以下为原逻辑，保持不变
    if(config.data.avatar) {
        const formData = new FormData()
        formData.append('deviceId', getDeviceId())
        Object.entries(config.data).forEach(([name, value]) => {
            formData.append(name, value)
        })
        config.data = formData
    } else {
        let data
        if(typeof config.data === 'string') {
            data = JSON.parse(config.data)
        } else {
            data = config.data
        }
        if(!data.deviceId) {
            data.deviceId = getDeviceId()
        }
    }
    return config
})

2. 修复api.js中的代码顺序错误 #

调整axios实例创建的顺序，确保先创建实例再配置或直接在创建时指定baseURL：

import axios, {AxiosResponse} from 'axios'
import {getAccessToken, getDeviceId} from 'utils'

export const API_URL = process.env.NEXT_PUBLIC_API_KEY

// 直接在create时指定baseURL，避免先赋值未定义的变量
export const $api_id = axios.create({
    withCredentials: false,
    baseURL: API_URL,
})

3. 检查Docker环境下localStorage状态 #

排查Docker启动的项目中，localStorage是否被意外写入null值的accessToken，确保未登录状态下该键不存在而非值为null。可以在注册前打印getAccessToken()的返回值，确认Docker环境下的状态。

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