ReactJS+Axios调用.NET Core Web API时JWT签名无效致401错误

1. 验证JWT令牌的完整性 #

• 在浏览器控制台执行console.log(localStorage.getItem("jwtToken"))，对比控制台输出的令牌与Postman中使用的令牌是否完全一致，重点排查是否存在多余空格、换行或引号。
• 解析令牌确认结构与签名部分正常（可使用本地JWT解析工具检查）。

2. 修正GET请求的参数传递方式 #

GET请求不符合HTTP规范，不应携带请求体。将userId改为URL查询参数传递：

async function getAllUserTasks() {
    try {
      return axios({
        method: "get",
        url: "http://localhost:5133/todo/ToDos",
        headers: {
          Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
        },
        params: {
          userId: '924BF80F-F394-4927-8DCC-A7B67AFA663C'
        },
      });
    } catch (error) {
      console.log(error);
    }
  }

同时确保后端接口从查询参数中获取userId，而非请求体。

3. 检查请求头格式 #

在浏览器开发者工具的Network标签中查看发送的请求头，确认Authorization字段严格遵循Bearer + 空格 + 令牌的格式，无多余字符。

4. 确认CORS中间件顺序正确 #

CORS中间件必须在认证中间件之前启用，否则可能导致请求头处理异常：

// Program.cs 示例配置顺序
app.UseCors("MyPolicy");
app.UseAuthentication();
app.UseAuthorization();

5. 排查令牌有效性与密钥一致性 #

• 检查令牌的exp字段，确认未过期。
• 验证后端jwtSettings.Secret与生成令牌时使用的密钥完全一致，注意大小写、特殊字符的准确性。

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