如何使用授权令牌对Fetch请求进行授权？调用Freesound API时Fetch返回未授权错误但Postman可正常运行

我一眼就看到你的代码里有两个关键问题导致了授权失败，咱们一步步来解决：

1. 错误的mode: "no-cors"设置 #

当你把请求模式设为"no-cors"时，浏览器会强制限制请求行为：

• 自定义请求头（比如你的Authorization令牌）会被浏览器直接忽略，根本不会发送到服务器
• 你无法读取响应内容（比如调用response.json()），因为响应会变成"opaque"类型，完全不可访问

Postman能正常工作是因为它不受浏览器的CORS规则约束，所以可以正常发送授权头并读取响应。

2. 请求配置结构不规范 #

你把method放在了headers对象里面，虽然GET是Fetch的默认请求方法，这个错误不会直接导致授权失败，但这是不规范的写法，容易引发其他问题。

修正后的代码 #

const BASE_URL = "https://freesound.org/apiv2/sounds/"; 
const rain = "58835"; 
const APIKEY = "foo"; 

fetch(BASE_URL + rain, { 
  method: "GET", 
  headers: { 
    'Authorization': `Token ${APIKEY}`, 
  },
  // 去掉mode: "no-cors"，使用默认的"cors"模式
}) 
.then((response) => {
  // 先检查响应状态，确认授权是否成功
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return response.json();
})
.then((json) => console.log(json)) 
.catch((err) => console.log(err));

额外注意事项 #

• 确保Freesound API允许从你的域名发起CORS请求。如果还是遇到CORS错误，可能需要检查Freesound API文档，确认是否需要在控制台配置允许的域名，或者考虑用后端代理转发请求（后端服务器不受浏览器CORS限制）。
• 绝对不要把API密钥直接写在前端代码里！这会导致密钥泄露，任何人都能拿到你的密钥滥用API。正确做法是把密钥放在后端，前端通过调用自己的后端接口间接访问Freesound API。

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