'JWT token with jQuery Ajax Error

I am trying to call an API (localhost) that has JWT using an Ajax, But i am getting and error i have tried the following 

$.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) 
        },

the respond is 404 Not Found

and the Request Headers is 

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

i have tried the following as well 

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);
});

but still the same error come up 404 not found

if i remove the 

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

or 

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

}

I do get the 401 Unauthorized error which it is correct.

The API is .NET Core 2 and it has been tested using Post Man and there is no issue with the API.

P.S. I am using CORS chrome extension to run my JS

any help would be welcomed to solve this issue

jqueryajaxjwt


Solution 1:[1]

Can you please try it this way? Check if it works?

$.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);
    }
  });

This works for me every time.Hope it will work for you.

Solution 2:[2]

In my case I have taken 404 Not Found while calling web API from client that is a method with authentication attribute. After I have implemented server with just JWT without Identity authentication and this error has gone but it giving me 401 error this time so I have noticed that, if you have using payload knowledge like issuer audience etc. You have to add this contents to exist request header otherwise it couldn't understand who has calling the api and doesn't make permission to use. At the end my client consumer function transformed like below:

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);
        }
    );

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 SRK
Solution 2 Flair

Related Questions