携带Key和Secret发送授权GET请求——JS授权错误解决方法

嘿，这个问题我之前帮不少开发者解决过！浏览器能正常访问但JS请求报错未授权，核心原因就是浏览器自动帮你带上了授权所需的请求头，但你自己写的JS请求没加。下面一步步来搞定：

1. 先找到浏览器访问时带的授权信息 #

首先得搞清楚浏览器到底带了什么头通过验证，操作很简单：

• 打开目标URL所在的页面，按F12打开开发者工具
• 切换到「Network」标签，刷新页面
• 在请求列表里找到那个目标API的请求（一般是GET方法，看URL就能认出来）
• 点击这个请求，查看「Request Headers」部分，重点找这两个字段：
  • Cookie：很多网站用会话Cookie做授权
  • Authorization：通常是Bearer token格式，比如Bearer xxxxxxx

这两个字段就是你JS请求里缺的关键授权信息。

2. 在JavaScript请求中带上授权头 #

根据你找到的授权类型，用fetch或者axios来写请求就行，举两个常见例子：

例子1：如果是Cookie授权 #

fetch('你的目标URL', {
  method: 'GET', // 要是POST/PUT请求就改成对应方法
  headers: {
    // 把你从浏览器里复制的Cookie值填在这里
    'Cookie': 'sessionId=xxxxxx; userToken=yyyyyy'
  },
  // 如果涉及跨域带Cookie，必须加这个配置
  credentials: 'include'
})
.then(res => res.json())
.then(data => console.log('拿到数据啦:', data))
.catch(err => console.error('请求失败:', err));

例子2：如果是Bearer Token授权 #

// 用fetch的情况
fetch('你的目标URL', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer 你复制的token值'
  }
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

// 用axios的话更简洁：
axios.get('你的目标URL', {
  headers: {
    'Authorization': 'Bearer 你复制的token值'
  }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

3. 注意避坑！ #

• 跨域问题：如果你的JS代码是在自己的域名下（比如localhost），而目标API是另一个域名，那得确保目标服务器配置了CORS：允许你的域名访问，并且如果带Cookie的话，要设置Access-Control-Allow-Credentials: true，同时你的请求里要加对应跨域凭证配置（上面例子里的credentials: 'include'或withCredentials: true）。
• 安全风险：别把复制的Cookie/Token硬编码在前端代码里！尤其是公开项目，这会泄露你的账户权限。如果是正式项目，应该走后端接口转发，或者找后端要一个获取临时token的接口。
• 过期问题：Cookie和Token一般都有有效期，过期后得重新获取，所以别指望复制一次就能永久用。

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