React前端Fetch请求失效：无法获取ASP.NET Core后端数据

核心问题分析 #

你直接访问API地址能获取数据，但React中fetch请求后console.log(json)无输出，大概率是跨域拦截或未处理请求错误导致的，以下是针对性解决方案：

解决方案 #

1. 配置后端CORS（最常见原因） #

React默认运行在http://localhost:3000，和后端https://localhost:7031属于不同端口，浏览器会触发跨域拦截，导致请求静默失败。

在ASP.NET Core的Program.cs中添加CORS配置：

var builder = WebApplication.CreateBuilder(args);

// 注册CORS服务，允许React域名访问
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactOrigin",
        policy => policy.WithOrigins("http://localhost:3000")
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

builder.Services.AddControllers();

var app = builder.Build();

// 在路由后、授权前启用CORS
app.UseCors("AllowReactOrigin");

app.UseAuthorization();

app.MapControllers();

app.Run();

2. 为fetch添加错误捕获逻辑 #

你的原代码没有处理请求失败的情况，若请求因任何原因失败（如HTTP 4xx/5xx状态码），会直接跳过then回调，导致无输出。修改App.js：

import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react'

function App() {

  useEffect(() => {
    fetch("https://localhost:7031/api/Arrangements")
    .then((res) => {
      // 校验HTTP响应状态，非2xx抛出错误
      if (!res.ok) {
        throw new Error(`请求失败，状态码：${res.status}`);
      }
      return res.json();
    })
    .then((json) => {
      console.log(json);
    })
    .catch((err) => {
      console.error("请求出错：", err); // 打印错误信息定位问题
    });         
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        testing project
      </header>
    </div>
  );
}

export default App;

3. 正确使用async/await写法（若尝试过异步函数） #

如果用async/await，需在useEffect中封装异步函数并调用：

useEffect(() => {
  const fetchArrangements = async () => {
    try {
      const res = await fetch("https://localhost:7031/api/Arrangements");
      if (!res.ok) throw new Error(`状态码：${res.status}`);
      const data = await res.json();
      console.log(data);
    } catch (err) {
      console.error("请求异常：", err);
    }
  };

  fetchArrangements();
}, []);

4. 用浏览器开发者工具定位问题 #

打开F12开发者工具 → 切换到Network标签，刷新页面后查看Arrangements请求：

• 若状态显示CORS error：确认后端CORS配置是否正确
• 若状态为404：检查API路径是否和Swagger一致（比如是否应为/api/Arrangementer）
• 若状态为200：查看Response标签确认返回数据格式是否合法

附Swagger接口截图 #

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