如何为可重定向的真实GET请求设置JWT请求头？原生JS/jQuery实现

兄弟，8小时折腾解决方案确实够闹心的！我给你整理了三种最靠谱的实现方式，都是你要的原生JavaScript和jQuery写法，直接抄过去用就行，关键细节我也给你标出来了，肯定能解决你的问题。

这是现在更推荐的原生写法，简洁直观，和现代浏览器兼容性很好：

// 假设你已经把获取到的JWT存在这个变量里
const jwtToken = "你的令牌内容";

fetch('/someProtectedURL', {
  method: 'GET',
  headers: {
    // 重点！这里必须加「Bearer + 空格」前缀，和Postman里的格式完全一致
    'Authorization': `Bearer ${jwtToken}`,
    // 如果你的API要求接收JSON格式，可选添加这个头
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  return response.json(); // 解析返回的JSON数据
})
.then(data => {
  console.log('成功获取到受保护数据：', data);
  // 这里写你拿到数据后的业务逻辑
})
.catch(error => {
  console.error('请求出错了：', error);
});

如果你的项目需要兼容旧版浏览器，用XHR会更稳妥：

const jwtToken = "你的令牌内容";
const xhr = new XMLHttpRequest();

xhr.open('GET', '/someProtectedURL', true);
// 设置Authorization请求头，同样别忘了「Bearer + 空格」
xhr.setRequestHeader('Authorization', `Bearer ${jwtToken}`);
// 按需添加Content-Type头
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.responseText);
    console.log('成功获取到数据：', data);
  } else {
    console.error('请求失败，状态码：', xhr.status);
  }
};

xhr.onerror = function() {
  console.error('网络请求出错，请检查连接或接口地址');
};

xhr.send();

如果你的项目已经引入了jQuery，写法会更简洁：

const jwtToken = "你的令牌内容";

$.ajax({
  url: '/someProtectedURL',
  method: 'GET',
  headers: {
    // 核心还是这个Authorization头的格式！
    'Authorization': `Bearer ${jwtToken}`
  },
  success: function(data) {
    console.log('受保护接口返回数据：', data);
    // 处理成功逻辑
  },
  error: function(xhr, status, error) {
    console.error('请求出错：', error, '状态码：', xhr.status);
  }
});

必看的关键注意事项 #

• 格式不能错：一定要确保Authorization头是Bearer + 空格 + 令牌的格式，很多人漏掉空格或者Bearer前缀，导致后端JWT验证失败
• 跨域检查：如果你的前端和Spring API不在同一个域名下，要确保后端配置了CORS，允许Authorization请求头被携带，否则会出现跨域错误
• 令牌有效性：可以在浏览器控制台打印jwtToken确认令牌内容正确，同时检查令牌是否过期（可以用JWT解析工具验证）

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