Postman请求API返回200正常，ReactJS代码调用却报错求助

这种情况我碰到好多次了——Postman能正常拿到200响应，但React代码里请求就失败，咱们先从你给出的代码片段入手，再一步步排查常见的坑点：

1. 先修复代码里的明显语法/逻辑问题 #

你给出的代码有未完成的部分（compo...应该是componentDidMount生命周期函数），还有urlEndPoint的定义有点冗余（参数myEndPoint根本没用到），先把基础代码补全，才能准确排查：

import React, { Component } from "react"; 
// 简化URL定义，既然没用到参数，直接写常量就行
const API_URL = "https://api.github.com/users/adhishlal";

export default class Categories extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      requestFailed: false,
      errorMessage: "",
      userData: null
    }; 
  } 

  componentDidMount() {
    // 这里是发起请求的核心位置
    fetch(API_URL)
      .then(response => {
        // 不要只看状态码，用response.ok判断请求是否成功
        if (!response.ok) {
          throw new Error(`HTTP错误！状态码：${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        console.log("拿到的数据：", data);
        this.setState({ userData: data });
      })
      .catch(error => {
        console.error("请求出错详情：", error);
        this.setState({ 
          requestFailed: true,
          errorMessage: error.message
        });
      });
  }

  render() {
    const { requestFailed, errorMessage, userData } = this.state;
    
    if (requestFailed) {
      return <div>请求失败：{errorMessage}</div>;
    }
    
    if (!userData) {
      return <div>加载中...</div>;
    }

    return (
      <div>
        <h2>用户信息</h2>
        <p>用户名：{userData.login}</p>
        <img src={userData.avatar_url} alt={userData.login} width="100" />
      </div>
    );
  }
}

2. 最常见的原因：CORS跨域问题 #

Postman是后端工具，不受浏览器的同源策略限制，但React在浏览器里运行，会触发CORS检查。如果API服务器没有配置允许你的前端域名跨域请求，就会直接失败。

• 怎么排查：打开浏览器控制台（F12），切换到Network标签，找到你的API请求，看Response里是不是有CORS error的提示。
• 解决办法：
  • 如果是你自己维护的API服务器，在后端配置CORS规则，允许你的前端域名（比如本地开发的http://localhost:3000）。
  • 如果是第三方API（比如GitHub的这个用户接口），其实GitHub API支持CORS，但如果你的请求需要认证，得在请求头里加token；或者可以给React配置代理：在package.json里加一行"proxy": "https://api.github.com"，然后把请求URL改成/users/adhishlal，这样浏览器会把请求转发到代理地址，规避跨域问题。

3. 检查请求头是否和Postman一致 #

Postman里可能默认或手动设置了某些请求头（比如Accept、Authorization），但React的fetch默认只带最基础的头，可能导致API拒绝请求。

• 排查方式：对比Postman里的Request Headers和浏览器Network里的Request Headers，把缺失的关键头加上，比如：

fetch(API_URL, {
  headers: {
    'Accept': 'application/vnd.github.v3+json', // GitHub API推荐的头
    // 如果需要认证，加上：'Authorization': 'token 你的GitHub个人访问令牌'
  }
})

4. 确认请求方式和参数完全匹配 #

确保React里的请求方式（GET/POST/PUT等）和Postman里的一致，参数（Query参数、请求体）也完全相同。比如你调用的GitHub用户接口是GET请求，fetch默认就是GET，这部分没问题，但如果是其他接口，比如POST，要记得在fetch的配置里加method: 'POST'和对应的body。

5. 完善错误捕获，定位具体问题 #

你原来的代码只记录了requestFailed，没有具体错误信息，建议像我上面的代码那样，捕获并存储错误消息，这样能快速知道是网络错误、HTTP状态码错误（比如403权限不足、404资源不存在）还是其他问题。

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