AngularJS中JWT认证REST API调用失败问题排查

我之前也碰到过几乎一模一样的问题，Postman能正常请求但前端页面调用就失败，结合你给出的信息，90%的概率是跨域资源共享(CORS)配置的问题——毕竟Postman不会触发浏览器的同源策略检查，但网页端的AJAX请求会严格遵守。下面一步步帮你排查和解决：

第一步：确认问题根源 #

先打开浏览器的开发者工具（F12），切换到「Network」标签，重新发起请求：

• 如果看到一个OPTIONS请求返回4xx/5xx状态码，或者控制台抛出类似No 'Access-Control-Allow-Origin' header is present on the requested resource的错误，那肯定是CORS配置的问题。

第二步：配置后端WebAPI的CORS策略 #

以ASP.NET Core为例，你需要在后端明确允许前端的域名/端口，同时允许携带Authorization头和凭证：

using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Builder;

public void ConfigureServices(IServiceCollection services)
{
    // 配置CORS策略
    services.AddCors(options =>
    {
        options.AddPolicy("AllowFrontendOrigin",
            builder => builder
                .WithOrigins("http://your-frontend-url:port") // 替换成你的前端页面实际地址，比如http://localhost:8080
                .AllowAnyHeader() // 允许所有请求头，包括Authorization
                .AllowAnyMethod() // 允许所有HTTP方法（GET/POST等）
                .AllowCredentials()); // 关键：允许携带凭证（比如JWT Token）
    });

    // 其他服务配置...
    services.AddControllers();
    services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
            .AddJwtBearer(options => { /* 你的JWT配置 */ });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 注意：CORS中间件要放在UseRouting和UseAuthorization之前
    app.UseCors("AllowFrontendOrigin");

    app.UseRouting();
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

第三步：优化AngularJS的请求代码 #

你的现有代码逻辑没问题，但可以添加错误处理方便排查，还可以用全局拦截器统一管理Token，避免重复代码：

var app = angular.module('myApp', []);

// 全局HTTP拦截器：自动给所有请求添加Authorization头
app.config(function($httpProvider) {
    $httpProvider.interceptors.push(function() {
        return {
            request: function(config) {
                // 这里可以从本地存储获取Token，而不是硬编码
                const jwtToken = 'eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQWRtaW4iLCJleHAiOjE1NjA5NDcyMzMsImlzcyI6Im15c2l0ZS5jb20iLCJhdWQiOiJteXNpdGUuY29tIn0.SMTy2H5vmWWUgCytHEHfT847ipE2hCzk0wvP2Of60Uk';
                if (jwtToken) {
                    config.headers.Authorization = `Bearer ${jwtToken}`;
                }
                return config;
            }
        };
    });
});

app.controller('myCtrl', function ($scope, $http) {
    $http.get("http://ip_address:3393/api/mp/dashboard")
    .then(function (response) {
        $scope.myWelcome = response.data;
        $scope.fridgetemp = $scope.myWelcome.fridge_temp;
    }, function(error) {
        // 新增错误处理，方便排查
        console.error('请求失败详情:', error);
        alert('请求失败，请打开浏览器控制台查看错误信息');
    });
});

第四步：验证请求是否正确发送 #

再次打开浏览器「Network」标签，查看你的GET请求的「Headers」：

• 确认Authorization头已经正确携带了Bearer xxxxx的内容
• 确认响应头里包含Access-Control-Allow-Origin，值是你前端的地址

如果以上步骤都完成，应该就能正常调用API了。另外提一句：不要把Token硬编码在代码里，建议存在localStorage或者sessionStorage里，生产环境更安全。

内容的提问来源于stack exchange，提问作者dotnetuser4225