React - 如何通过标头发送 JWT

Question

我有一个 .NET 7 Web API，它通过 JWT 进行身份验证/授权。目前，该应用程序可以在没有 JWT 的情况下正确阻止 API 请求，并通过 SwaggerUI 和 Postman 测试允许它们使用它；但是，我无法通过 React 正确发送请求。

Method sending request:

const getTopics = () => {
    const url = API_ROUTES.TOPICS_GET_ALL_TOPICS;
    fetch(url, {
      method: "GET",
      headers: {
        'Authorization': `Bearer ${jwt}`
      }
    })
    .then(res => res.json())
    .then(topicsFromServer => {
      console.log(topicsFromServer);
      setTopics(topicsFromServer);
    })
    .catch((error => {
      console.error(error);
    }))
  }

如果我控制台记录上面的响应，我会收到以下内容：

Response {type: 'cors', url: 'https://localhost:7174/Account/Login?ReturnUrl=%2Ftopic%2Fget-all-topics', redirected: true, status: 405, ok: false, …}
body
: 
(...)
bodyUsed
: 
false
headers
: 
Headers {}
ok
: 
false
redirected
: 
true
status
: 
405
statusText
: 
""
type
: 
"cors"
url
: 
"https://localhost:7174/Account/Login?ReturnUrl=%2Ftopic%2Fget-all-topics"
[[Prototype]]
: 
Response

响应 url 不是现有端点，但我猜它是由 .NET

[Authorize]

属性自动生成的。

Cors Policy in .NET:

builder.Services.AddCors(options =>
{
    options.AddPolicy("CORSPolicy", builder =>
    {
        builder
        .AllowAnyMethod()
        .AllowAnyHeader()
        .WithOrigins("http://localhost:3000", "https://localhost:3000");
    });
});

不确定这是否有帮助，但这是我的 Swagger Gen 配置：

builder.Services.AddSwaggerGen(options =>
{
    options.AddSecurityDefinition("auth0", new OpenApiSecurityScheme
    {
        In = ParameterLocation.Header,
        Name = "Authorization",
        Type = SecuritySchemeType.ApiKey
    });

    options.OperationFilter<SecurityRequirementsOperationFilter>();
});

如果需要任何其他信息，请告诉我。谢谢！

编辑：

经过进一步测试，jwt 似乎仍然没有被使用。一旦用户登录到他们的帐户，cookie 就会存储在浏览器 (SwaggerUI) 或 Postman 中，允许他们在没有 JWT 的情况下访问 API。我将包括我对更多源代码的相关问题：

.NET 7 具有身份和 JWT 的控制器授权

.NET 7 Identity JwtBearer - 授权属性不影响 API

Answer 1

这里是一个使用 axios 包对 C# API 端点进行 API 调用的反应示例，使用的似乎是您的变量名和端点路由。

import axios from 'axios';

const getTopics = () => {
  return axios.get(API_ROUTES.TOPICS_GET_ALL_TOPICS, {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Authorization: `Bearer ${jwt}`
    }
  }).then(response => {
    console.log(response.data);
    setTopics(response.data);
  }).catch(error => console.error(error));
};