如何在Axios中正确传递secret-key请求头？jsonbin.io私有数据问题

我正在使用jsonbin.io托管私有JSON数据，通过Axios发起GET请求获取该数据。需在请求头中传递secret-key，预期写法为headers{ secret-key: mysecretkey }，但遇到问题：直接写secret-key会编译报错，用"secret-key"则无法获取数据。我的代码如下：

const secretKey = process.env.REACT_APP_SECRET_KEY;
const localUrl = process.env.REACT_APP_LOCAL_URL;
const fetchPhotosFlocal = async () => {
  const response = await axios.get(localUrl, {
    headers: {
      secret-key: secretKey,
    },
  });
  console.log(response);
};

请问该如何解决？

首先，你遇到的第一个编译报错问题，是因为JavaScript对象的属性名包含连字符这类特殊字符时，必须用引号包裹，所以"secret-key"才是语法正确的写法。至于加引号后无法获取数据的问题，大概率和引号本身无关，我们可以从以下几个方向排查解决：

1. 先确认环境变量是否正确加载 #

很多时候问题出在环境变量没有被正确读取，先在函数里打印变量值做验证：

const fetchPhotosFlocal = async () => {
  console.log('Secret Key:', secretKey); // 检查是否拿到正确的密钥
  console.log('Request URL:', localUrl); // 检查请求地址是否正确
  // ... 后续请求代码
};

如果是React项目，注意修改.env文件后需要重启开发服务器，且环境变量名必须以REACT_APP_开头才会被框架识别加载。

2. 确保请求头写法完全合规 #

语法正确的请求头写法应该是这样的，用双引号或单引号包裹属性名：

const response = await axios.get(localUrl, {
  headers: {
    "secret-key": secretKey, // 双引号包裹是必须的语法要求
    // 也可以用单引号：'secret-key': secretKey
  },
});

这个写法本身符合Axios的要求，不会导致请求头丢失。

3. 检查全局Axios拦截器是否干扰 #

如果你的项目配置了全局请求拦截器，可能会无意中修改或覆盖自定义请求头。可以暂时注释掉拦截器代码，测试请求是否恢复正常。

4. 换用原生Headers对象构建请求头 #

如果上述方法都无效，可以尝试用原生Headers对象来构建请求头，再传递给Axios：

const fetchPhotosFlocal = async () => {
  const headers = new Headers();
  headers.append('secret-key', secretKey);
  
  const response = await axios.get(localUrl, {
    headers: headers
  });
  console.log(response);
};

这种写法可以彻底避免对象属性名的语法歧义，确保请求头被正确设置。

5. 验证请求头是否实际发送 #

打开浏览器开发者工具的Network面板，查看发送的GET请求的Request Headers，确认secret-key字段是否存在、值是否正确。如果请求头里没有这个字段，说明是前端代码的问题；如果字段存在但仍无法获取数据，需要检查jsonbin.io的密钥权限（比如密钥是否对应目标私有数据、是否过期等）。

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