如何在ReactJS中使用fetch()发送带HTTP请求头的HTTP请求

嘿，我来帮你弄明白怎么在React里用fetch发送带请求头的HTTP请求～

你原来的fetch代码是最基础的GET请求，不带任何自定义头。要添加请求头，只需要给fetch方法传入第二个参数——一个配置对象，其中的headers字段就是用来设置请求头的。

两种设置请求头的方式 #

1. 使用普通JavaScript对象（最常用）

直接定义一个包含请求头键值对的对象，然后在fetch配置里引用它：

const URL = "http://url.com";
// 自定义请求头，这里举两个常见例子：Content-Type和身份验证令牌
const customHeaders = {
  'Content-Type': 'application/json', // 告诉服务器我们发送/接收的是JSON格式数据
  'Authorization': 'Bearer YOUR_JWT_TOKEN' // 如果需要身份验证，比如JWT令牌
};

fetch(URL, {
  method: 'GET', // 请求方法，默认是GET，POST/PUT/DELETE的话改这里
  headers: customHeaders
})
.then(res => {
  // 重要：fetch不会自动把HTTP 4xx/5xx视为错误，所以要手动检查响应状态
  if (!res.ok) {
    throw new Error(`请求失败，状态码：${res.status}`);
  }
  return res.json();
})
.then(json => {
  this.setState({ someData: json });
})
.catch(error => {
  // 处理网络错误或者HTTP错误
  console.error('请求出错啦:', error);
});

2. 使用Headers对象（更灵活，适合复杂场景）

如果需要动态添加/删除请求头，可以用浏览器原生的Headers API：

const URL = "http://url.com";
const requestHeaders = new Headers();
// 逐个添加请求头
requestHeaders.append('Content-Type', 'application/json');
requestHeaders.append('Authorization', 'Bearer YOUR_JWT_TOKEN');

fetch(URL, {
  method: 'GET',
  headers: requestHeaders
})
.then(res => {
  if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
  return res.json();
})
.then(json => this.setState({ someData: json }))
.catch(err => console.error('请求失败:', err));

额外提示：POST请求带请求头示例 #

如果是发送POST请求（比如提交表单数据），除了请求头，还要加上body字段：

const URL = "http://url.com/submit";
const postData = { username: 'test', email: 'test@example.com' };

fetch(URL, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(postData) // 把JavaScript对象转为JSON字符串
})
.then(res => {
  if (!res.ok) throw new Error(`提交失败：${res.status}`);
  return res.json();
})
.then(response => console.log('提交成功:', response))
.catch(err => console.error('提交出错:', err));

关键注意点 #

• 错误处理：fetch只有在完全无法建立连接时才会触发catch，HTTP 404、500这类状态码不会自动进入catch，所以一定要手动检查res.ok（当状态码在200-299之间时，res.ok为true）。
• 请求头格式：请求头的键名通常采用短横线分隔的格式（比如Content-Type），值要符合对应头的规范。
• 跨域请求：如果是跨域请求，有些请求头（比如自定义的X-*头）可能需要服务器配置CORS允许这些头，否则浏览器会拦截请求。

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