为API配置.env文件后Axios请求出现403状态码错误求助

错误详情 #

AxiosError {message: 'Request failed with status code 403', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

前端请求代码 #

useEffect(() => {
    const fetchData = async () => {
        try {
            const data = await axios.get(process.env.REACT_APP_API_URL + "/products", {
                headers: { Authorization: "bearer" + process.env.REACT_APP_API_TOKEN, }
            })
            console.log(data)

        } catch (err) {
            console.log(err)

        }
    }
    fetchData();
}, [])

.env配置内容 #

REACT_APP_API_TOKEN =d497def4a0c937df0c7ee1514a2975f3ab433df1557bda09405350247ff23425f1c47fabe1dbcb5433c89be91344f7557a2fe0060da7fa006570bf82ae7bb65c81f5aa469dbaaf1576ab8a28f4a65892653aebb394581423495c951c90e697d67fe1c5d08dfa10a6b834d3e06cdc37d54b837d1ec10aebabb9fb86d9adfb1600
REACT_APP_API_URL = http://localhost:1337/api

排查步骤 #

1. 修正Authorization头格式 #

你的Authorization头缺少关键空格，正确格式要求Bearer（首字母大写）后必须跟空格再拼接token。修改代码如下：

headers: { Authorization: `Bearer ${process.env.REACT_APP_API_TOKEN}` }

2. 确认.env变量是否加载成功 #

在fetchData函数开头添加打印，验证变量值是否正确：

console.log("API地址:", process.env.REACT_APP_API_URL);
console.log("API Token:", process.env.REACT_APP_API_TOKEN);

注意：修改.env文件后必须重启开发服务器，变量才会生效。

3. 验证API端权限 #

403是服务器明确拒绝访问，可能的原因：

• Token已过期或无效，重新生成有效token测试
• 目标/products端点需要特定权限（如管理员权限），当前账号无访问权限
• 服务器CORS配置未允许前端域名访问，检查后端CORS设置

4. 用Postman直接测试请求 #

把请求复制到Postman中，手动添加Authorization: Bearer <你的token>头，测试是否能正常返回数据：

• 如果Postman也返回403，问题出在API端或token本身，和Axios无关
• 如果Postman请求成功，再回到前端代码排查变量拼接、环境配置问题

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