React前端无法访问带认证的ASP.NET Core 7 Web API控制器（Postman可访问）

问题描述 #

开发ASP.NET Core 7 Web API实现用户登录、单词管理功能，React前端调用需认证的WordsController失败，但Postman可正常访问；将浏览器控制台的Token复制到Postman也无法成功；JWT在jwt.io验证正常，无需认证的控制器可被React正常调用。

排查与修复方案 #

1. 统一JWT密钥编码格式 #

JwtHelper.cs中用Encoding.ASCII.GetBytes生成密钥，而Program.cs认证配置中用Encoding.UTF8.GetBytes，若密钥含非ASCII字符会导致签名验证失败。统一修改为UTF8编码：
修改JwtHelper.cs：

// 原代码
// var key = Encoding.ASCII.GetBytes(configuration["Jwt:SecretKey"]);
// 修改后
var key = Encoding.UTF8.GetBytes(configuration["Jwt:SecretKey"]);

2. 移除React请求中多余的响应头 #

React请求里添加的access-control-allow-origin是服务器响应头，不应出现在请求头中，删除该字段避免潜在问题：
修改React的fetchWords函数：

headers: {
    // 移除这一行："access-control-allow-origin" : "*", 
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token
}

3. 启用控制器认证并添加调试日志 #

开启WordsController的[Authorize]属性，同时在Program.cs的JWT配置中添加认证事件日志，排查失败原因：

• 给WordsController加上[Authorize]：

[ApiController]
[Authorize] // 启用认证
[Route("api/[controller]")]
public class WordsController : ControllerBase
{
    // ... 现有代码
}

• 在Program.cs的JWT配置中添加事件：

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            // 现有参数...
        };
        // 添加调试事件
        options.Events = new JwtBearerEvents
        {
            OnAuthenticationFailed = context =>
            {
                Console.WriteLine($"认证失败原因: {context.Exception.Message}");
                return Task.CompletedTask;
            },
            OnTokenValidated = context =>
            {
                Console.WriteLine("Token验证成功");
                return Task.CompletedTask;
            }
        };
    });

运行后查看控制台输出，即可明确认证失败的具体原因（如令牌过期、签名不匹配等）。

4. 确认Token存储与传递正确性 #

• 确保登录后将Token正确存入localStorage，注意返回字段的大小写：

// 登录请求示例
const login = async (username, password) => {
    const res = await axios.post(`${BASE_URL}/api/account/login`, {
        Username: username,
        Password: password,
        RememberMe: false
    });
    // 后端返回的是Token（首字母大写），需匹配
    localStorage.setItem('token', res.data.Token);
};

• 检查控制台打印的Token是否与后端返回的完全一致，避免存在多余空格或引号。

5. 排查协议混合问题 #

若API使用HTTPS（如https://localhost:70xx）而React用HTTP（http://localhost:3000），可能导致Header传递异常。开发环境可临时允许浏览器的混合内容，或统一将API和React都改为HTTP/HTTPS。

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