React中Axios带Authorization头请求出现net::ERR_HTTP2_PROTOCOL_ERROR 200

你遇到的情况是：React项目用Axios给本地.NET 6.0后端发GET请求，不带Authorization头能正常获取数据，添加后就报net::ERR_HTTP2_PROTOCOL_ERROR 200；Chrome、Edge均出现该错误，但Postman无论是否带头都能正常请求。

以下是可能的原因及对应的解决办法：

1. CORS配置未允许自定义头 #

浏览器会对跨域请求发送OPTIONS预检请求，若.NET后端的CORS政策未明确允许Authorization头，就会导致请求异常（Postman不受浏览器CORS限制，所以能正常请求）。

解决方式：
在.NET项目的Program.cs中更新CORS配置，明确允许Authorization头：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp",
        policy =>
        {
            policy.WithOrigins("你的React应用地址，比如http://localhost:3000")
                  .AllowAnyMethod()
                  .AllowHeaders("Authorization", "Content-Type"); // 按需指定允许的头，或用AllowAnyHeader()
        });
});

app.UseCors("AllowReactApp");

2. HTTPS证书或HTTP2协议冲突 #

本地开发的HTTPS证书可能未被浏览器信任，或者.NET后端的HTTP2配置存在冲突。浏览器对HTTPS的校验比Postman严格，带自定义头时容易触发协议层错误。

解决方式：

• 信任本地.NET开发证书：打开命令行执行 dotnet dev-certs https --trust
• 强制Axios使用HTTP1.1（仅开发环境临时测试）：

  import axios from "axios";
  import http from 'http';
  import https from 'https';
  
  const axiosInstance = axios.create({
    baseURL: "https://localhost:42310/",
    httpsAgent: new https.Agent({ 
      keepAlive: true, 
      rejectUnauthorized: false // 生产环境请勿启用，仅开发时忽略证书校验
    })
  });
  
  export default axiosInstance;
  

3. Bearer Token格式或内容异常 #

检查Token是否存在多余字符、拼写错误或已过期。可能复制到代码时不小心带入了空格、换行符等，导致后端解析失败。

解决方式：
打印代码中生成的Authorization头完整内容，和Postman里的请求头做对比，确保两者完全一致。

4. 后端认证中间件抛出未处理异常 #

.NET后端的认证中间件在处理Token时可能抛出异常，但未正确返回响应，导致浏览器收到异常的HTTP2帧。

解决方式：
在后端添加日志排查错误，比如在Program.cs中配置调试级别的日志：

builder.Logging.AddConsole();
builder.Logging.SetMinimumLevel(LogLevel.Debug);

运行后端后查看控制台输出的认证相关日志，定位具体错误点。

内容的提问来源于stack exchange，提问作者Michał T