带有 jQuery Ajax 错误的 JWT 令牌答案

【问题标题】：JWT token with jQuery Ajax Error带有 jQuery Ajax 错误的 JWT 令牌
【发布时间】：2022-01-27 03:30:00
【问题描述】：

我正在尝试使用 Ajax 调用具有 JWT 的 API（本地主机），但我得到了错误我已经尝试了以下

$.ajax({

    url:'http://localhost:50298/api/Validate', 
        Method :'GET',
        dataType: 'json',
          beforeSend : function(xhr) {
            xhr.setRequestHeader("Accept", "application/json");
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.setRequestHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MjE1Njg0NDgsImlzcyI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTAyOTgvIiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdDo1MDI5OC8ifQ._HLLwRXoZksBSICPHQlLd-0r_uJJN_kmw2p78XOBfmw");
        },
        success: function (result) 
        { 
            console.log(result)
        },

        error: function Failed(result)
        { 
            console.log(result) 
        },

响应是 404 Not Found

请求标头是

OPTIONS /api/Validate HTTP/1.1
Host: localhost:50298
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Access-Control-Request-Headers: authorization,content-type
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8

我也尝试过以下方法

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://localhost:50298/api/Validate",
  "method": "GET",
  "headers": {
    "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MjE1NjMyMTcsImlzcyI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTAyOTgvIiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdDo1MDI5OC8ifQ.acp7NbeLt4LbaBevqeNa3z-BJQ-Xrej6-covNWLZcQQ",
    "Cache-Control": "no-cache",

  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

但仍然出现相同的错误 404 not found

如果我删除了

xhr.setRequestHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MjE1Njg0NDgsImlzcyI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTAyOTgvIiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdDo1MDI5OC8ifQ._HLLwRXoZksBSICPHQlLd-0r_uJJN_kmw2p78XOBfmw");

或

 "headers": {
"Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MjE1NjMyMTcsImlzcyI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTAyOTgvIiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdDo1MDI5OC8ifQ.acp7NbeLt4LbaBevqeNa3z-BJQ-Xrej6-covNWLZcQQ",
"Cache-Control": "no-cache",

}

我确实得到了正确的 401 Unauthorized 错误。

API 是 .NET Core 2，已经使用 Post Man 进行了测试，API 没有问题。

附：我正在使用 CORS chrome 扩展来运行我的 JS

欢迎任何帮助来解决这个问题

【问题讨论】：

可能你的路由有问题。我建议你检查一下。
路由没有问题，路由在控制器中设置如下： [Produces("application/json")] [Route("api/Token")] ，我可以调用API使用邮递员

标签： jquery ajax jwt

【解决方案1】：

你可以试试这个方法吗？检查它是否有效？

$.ajax({
    url: 'http://localhost:50298/api/Validate',
    headers: {
        'Accept':'application/json',
        'Content-Type':'application/json',
        'Authorization':'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MjE1Njg0NDgsImlzcyI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTAyOTgvIiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdDo1MDI5OC8ifQ._HLLwRXoZksBSICPHQlLd-0r_uJJN_kmw2p78XOBfmw'
    },
    method: 'GET',
    dataType: 'json',
    success: function(data){
      console.log('succes: '+data);
    }
  });

这对我每次都有效。希望它对你有用。

【讨论】：

您好，我尝试过但仍然收到 404，这是我返回的请求标头 ---- Accept:*/* Accept-Encoding:gzip, deflate, br Accept-Language:en-GB ,en-US;q=0.9,en;q=0.8 Access-Control-Request-Headers:authorization,content-type Access-Control-Request-Method:GET Connection:keep-alive Host:localhost:50298 Origin:null User -Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

【解决方案2】：

在我的情况下，我在从客户端调用 Web API 时采用了 404 Not Found，这是一种具有身份验证属性的方法。在我只使用没有身份验证的 JWT 实现服务器之后，这个错误已经消失，但这次它给了我 401 错误，所以我注意到了，如果您使用有效负载知识，如发行者受众等。您必须将此内容添加到现有请求标头，否则它无法理解谁调用了 api 并且没有使用权限。最后，我的客户消费者功能转变如下：

request.post('https://localhost:44557/api/controller1/method1')
        .set('Authorization', 'Bearer '+ pgtoken.toString())
        .set('Accept', 'application/json')
        .set('Content-Type', 'application/json')
        .set('issuer', 'west-world.xxxxx.com')
        .set('Audience', 'yyyyy.xxxxxx.com')
        .send({ key: value,
                key2: value2 // etc...
        })
        .end(function(err, res){
            localStorage.setItem("result: ", res.text);
        }
    );

【讨论】：