how to call the a rest api using JWT in angular js

Question

i have created one web api with jwt token based authentication in webapi. i want to call the rest api in the html page with angular js $http. i tried but its showing request failed .im getting response from the postman tool but in the webpage.dont know how to pass the bearer token in the header.

postman request

GET /api/mp/dashboard HTTP/1.1
Host: localhost:55417
Authorization: Bearer eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQWRtaW4iLCJleHAiOjE1NjA5NDcyMzMsImlzcyI6Im15c2l0ZS5jb20iLCJhdWQiOiJteXNpdGUuY29tIn0.SMTy2H5vmWWUgCytHEHfT847ipE2hCzk0wvP2Of60Uk

angular js code

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {                 
    $http.get("http://ip_address:3393/api/mp/dashboard", {
        headers: { 'Authorization': 'Bearer eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQWRtaW4iLCJleHAiOjE1NjA5NDcyMzMsImlzcyI6Im15c2l0ZS5jb20iLCJhdWQiOiJteXNpdGUuY29tIn0.SMTy2H5vmWWUgCytHEHfT847ipE2hCzk0wvP2Of60Uk' }
    })
    .then(function (response) {
        $scope.myWelcome = response.data;
        $scope.fridgetemp = $scope.myWelcome.fridge_temp;       
    });
});

Answer 1

Try This Http get call, for headers you have to pass a field in the object called Content-Type : 'application/json' along with Authorization

$http({
            method: "GET",
            url: 'http://ip_address:3393/api/mp/dashboard',
            headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQWRtaW4iLCJleHAiOjE1NjA5NDcyMzMsImlzcyI6Im15c2l0ZS5jb20iLCJhdWQiOiJteXNpdGUuY29tIn0.SMTy2H5vmWWUgCytHEHfT847ipE2hCzk0wvP2Of60Uk'
            },
            data: '' //this field depends on coder.
        })
        .then(function (response) {
                //your success result code handling 
            },
            function (error) {
              //your error handling code
                }
            });