Javascript 如何在angular js中使用JWT调用rest api

我在webapi中创建了一个带有jwt令牌身份验证的web api。我想用angular js$http调用html页面中的rest api。我试过了，但是它的显示请求失败。我从邮递员工具得到了响应，但是在网页中。不知道如何在标题中传递承载令牌

邮递员要求

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

角js代码

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

---

尝试此Http get调用，对于标题，您必须在名为内容类型的对象中传递一个字段：“application/json”以及授权

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

---

可以肯定的是，您是否在后端检查了报头是否到达？可能它正在到达，但还有其他问题。但是在post man工具中，它只使用单头承载身份验证头。在postman中运行时，它也应该在angular js代码中运行。只需在api中检查CORS（跨源资源共享）权限设置。例如，api在不同的端口上运行在同一个系统上，UI在不同的端口上运行，浏览器将阻止XHR请求。我明白了。对不起，我没有使用正确的api。