从.env.development读取TMDB API Key出现401错误求助

使用dotenvx加载.env.development中的TMDB API密钥时，网站请求资源返回401未授权状态码；但直接将API密钥硬编码到代码中时，请求完全正常（确认API密钥本身有效）。其他环境变量通过dotenvx在后端可正常使用，已尝试两种启动方式（手动CLI命令、package.json脚本配置预加载），均显示环境变量注入成功，但问题依旧。

相关文件内容：

• .env.development：

API_KEY="my_api_key"

• api-config.js：

const apiKey = process.env.API_KEY;
const apiUrl = "my_api_url";
const apiKeyParams = `my_api_params`;

错误表现：请求TMDB API时返回401状态码（显示未授权错误）

以下是针对该问题的排查和修复步骤：

1. 移除环境变量值的多余引号 #

.env.development中给API_KEY加的双引号会被dotenvx解析为值的一部分，导致实际传递给TMDB的密钥是带引号的字符串（"my_api_key"而非my_api_key），这会触发API验证失败。

修改.env.development：

API_KEY=my_api_key

2. 适配React前端环境变量命名规范（若为前端代码） #

如果api-config.js是运行在前端浏览器环境中，react-scripts默认只会暴露以REACT_APP_为前缀的环境变量到前端代码中。非此前缀的变量会被自动过滤，导致process.env.API_KEY拿到undefined。

• 修改.env.development：

REACT_APP_API_KEY=my_api_key

• 修改api-config.js：

const apiKey = process.env.REACT_APP_API_KEY;
const apiUrl = "my_api_url";
const apiKeyParams = `api_key=${apiKey}`; // 确保正确拼接密钥参数

3. 验证环境变量的实际值 #

在api-config.js中添加日志，确认加载的API密钥是否正确：

const apiKey = process.env.REACT_APP_API_KEY; // 或process.env.API_KEY，根据实际前缀调整
console.log("Loaded API Key:", apiKey); // 启动项目后查看浏览器/终端控制台

如果输出的密钥带引号、为空或undefined，说明变量加载仍有问题，需重新检查配置。

4. 确认请求参数的拼接逻辑 #

确保apiKeyParams正确拼接了API密钥，比如请求URL应为：

const fullUrl = `${apiUrl}?${apiKeyParams}`;

避免硬编码参数或拼接错误导致密钥未正确传递。

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