如何在C# WebApi/React项目中配置CORS响应头解决跨域错误？

API 探路者

2026-8-12

跨域问题排查与修复方案

1. 修复后端CORS配置的语法错误

你的Program.cs里app.UseCors("AllowAll)");存在语法错误——参数里多了一个右引号，导致CORS策略无法正确加载。同时要确保CORS中间件的顺序正确，必须放在UseRouting之后、UseAuthorization之前。

修正后的Program.cs代码：

builder.Services.AddCors(
    builder => {
        builder.AddPolicy("AllowAll",
            policy => policy
                .AllowAnyHeader()   
                .AllowAnyMethod()
                .AllowAnyOrigin()
        );
    }
);

// 确保中间件顺序正确
app.UseRouting();
app.UseCors("AllowAll"); // 修正引号错误
app.UseAuthorization();

app.MapControllers();

2. 修复React端异步调用的逻辑错误

你的Games组件里直接把异步函数GameService.getAll赋值给了状态，没有实际调用它，而且setState是异步操作，直接console.log无法获取更新后的状态值。

修正后的Games组件代码：

import { useEffect, useState } from "react"
import GameService from '../Services/GameService';

const Games = () => {
    const [games, setGames] = useState([]);

    useEffect(() => {
        // 异步调用接口，用async/await处理
        const fetchGames = async () => {
            try {
                const gameData = await GameService.getAll();
                setGames(gameData);
                console.log(gameData); // 直接打印返回的数据
            } catch (error) {
                console.error('获取游戏列表失败:', error);
            }
        };

        fetchGames();
    }, [])

    return (
        // 这里可以添加渲染games的逻辑，示例：
        <div>
            {games.map(game => (
                <div key={game.id}>{game.title}</div>
            ))}
        </div>
    )
}

export default Games;