如何在JavaScript中实现带请求头的HTTP请求（含curl示例）

好问题！对应你给出的curl命令，在JavaScript里实现这个操作其实很简单，我根据不同的运行环境给你整理了几种常用的方法：

浏览器端：使用原生Fetch API #

这是现在浏览器里最推荐的方式，不需要额外依赖，语法也更简洁：

const authToken = '你的TOKEN';
const targetUrl = 'https://api.hetzner.cloud/v1/servers';

fetch(targetUrl, {
  method: 'GET', // 默认就是GET方法，这里显式写出来更清晰
  headers: {
    // 这里对应curl里的-H参数，设置Authorization请求头
    'Authorization': `Bearer ${authToken}`
  }
})
.then(response => {
  // Fetch不会自动把HTTP错误（比如401、500）转为异常，需要手动判断
  if (!response.ok) {
    throw new Error(`请求失败，状态码: ${response.status}`);
  }
  // 把响应解析为JSON格式
  return response.json();
})
.then(serverData => {
  console.log('获取到的服务器列表:', serverData);
})
.catch(error => {
  console.error('请求过程中出错:', error);
});

Node.js环境：使用原生https模块 #

如果是在Node.js后端代码里发送请求，可以用内置的https模块（因为目标地址是HTTPS协议），不需要安装任何第三方包：

const https = require('https');

const authToken = '你的TOKEN';
const requestOptions = {
  hostname: 'api.hetzner.cloud',
  path: '/v1/servers',
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${authToken}`
  }
};

// 发起请求
const req = https.request(requestOptions, (res) => {
  let responseData = '';

  // 接收响应数据片段
  res.on('data', (chunk) => {
    responseData += chunk;
  });

  // 响应接收完成
  res.on('end', () => {
    try {
      const parsedData = JSON.parse(responseData);
      console.log('服务器返回的数据:', parsedData);
    } catch (parseErr) {
      console.error('解析响应JSON出错:', parseErr);
    }
  });
});

// 监听请求错误
req.on('error', (error) => {
  console.error('请求发送失败:', error.message);
});

// 结束请求
req.end();

跨环境方案：使用Axios库 #

如果你希望代码能同时在浏览器和Node.js里运行，或者想要更简洁的语法，Axios是个不错的选择（需要先安装或引入）：

// Node.js环境先执行 npm install axios 安装，浏览器可以通过CDN引入
const axios = require('axios');

const authToken = '你的TOKEN';
const targetUrl = 'https://api.hetzner.cloud/v1/servers';

axios.get(targetUrl, {
  headers: {
    'Authorization': `Bearer ${authToken}`
  }
})
.then(response => {
  // Axios会自动解析JSON，响应数据存在response.data里
  console.log('服务器列表:', response.data);
})
.catch(error => {
  console.error('请求出错:', error.response?.data || error.message);
});

Axios的优势在于它会自动处理HTTP错误状态码，并且内置了JSON解析，用起来比原生方法更省心。

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