Angular 5 HTTP Client处理JWT登录时响应头Authorization缺失

嘿，我之前碰到过完全一样的情况！Chrome网络面板明明能看到Authorization头，但前端代码就是拿不到，这其实是CORS（跨源资源共享）的限制在搞鬼。

问题原因 #

浏览器出于安全考虑，默认只会让前端JS代码访问一部分「安全的」响应头（比如Content-Type、Cache-Control这些），像Authorization这类自定义或非标准头，必须由服务器明确声明允许暴露给前端，否则即使Network面板能看到，代码里也获取不到。

解决方案：服务器端配置Access-Control-Expose-Headers #

你需要在服务器的登录接口响应头中添加Access-Control-Expose-Headers字段，把Authorization列进去。下面是几种常见后端框架的配置示例：

1. Node.js + Express

const express = require('express');
const app = express();

// 在CORS中间件里配置
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 根据实际需求调整跨源规则
  res.header('Access-Control-Expose-Headers', 'Authorization'); // 关键配置
  next();
});

// 登录接口
app.post('/login', (req, res) => {
  // 验证用户名密码，生成JWT
  const token = '你的JWT Token';
  res.header('Authorization', `Bearer ${token}`);
  res.header('Pragma', 'no-cache');
  res.json({ success: true });
});

2. Python + Django

在视图函数中添加响应头配置：

from django.http import JsonResponse

def login(request):
    # 用户名密码验证、生成JWT逻辑...
    token = '你的JWT Token'
    response = JsonResponse({'success': True})
    response['Authorization'] = f'Bearer {token}'
    response['Pragma'] = 'no-cache'
    # 声明允许暴露的头
    response['Access-Control-Expose-Headers'] = 'Authorization'
    return response

3. Java + Spring Boot

通过@CrossOrigin注解指定暴露的头：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;

@RestController
public class LoginController {

    @PostMapping("/login")
    @CrossOrigin(exposedHeaders = "Authorization") // 关键配置
    public String login(HttpServletResponse response) {
        String token = "你的JWT Token";
        response.setHeader("Authorization", "Bearer " + token);
        response.setHeader("Pragma", "no-cache");
        return "{\"success\": true}";
    }
}

前端验证 #

配置完服务器后，前端就可以正常获取Authorization头了。比如用fetch的例子：

fetch('/login', {
  method: 'POST',
  body: JSON.stringify({ username: 'xxx', password: 'xxx' }),
  headers: { 'Content-Type': 'application/json' }
})
.then(response => {
  const token = response.headers.get('Authorization'); // 现在能正常拿到了！
  console.log(token);
  return response.json();
});

或者用axios：

axios.post('/login', { username: 'xxx', password: 'xxx' })
.then(response => {
  const token = response.headers.authorization; // axios中响应头key为小写
  console.log(token);
});

简单来说，就是服务器得明确告诉浏览器：「这个Authorization头可以让前端JS访问」，不然浏览器会出于安全考虑把它藏起来哦～

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