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

【问题标题】：how to call the a rest api using JWT in angular js如何在angular js中使用JWT调用rest api
【发布时间】：2019-11-02 05:05:01
【问题描述】：

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

【问题讨论】：

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

标签： javascript angularjs asp.net-core-webapi jwt-auth

【解决方案1】：

试试这个 Http get 调用，对于标头，您必须在对象中传递一个名为 Content-Type : 'application/json' 的字段以及 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
                }
            });

【讨论】：