如何使用fetch或axios发送Authentication请求头？

嘿，我看了你的代码，问题主要出在几个关键地方，尤其是那个mode: "no-cors"设置，直接导致你的Authorization头被浏览器拦下来了，咱们一步步来修正：

• 第一个坑：mode: "no-cors"的限制
  当你把请求模式设为no-cors时，浏览器会严格限制请求只能使用CORS安全列表里的标准头，Authorization不在这个列表里，所以浏览器会自动忽略这个头，根本不会发送到服务器。要携带自定义头，必须把模式改成cors——这其实是fetch的默认值，甚至可以不用专门写出来。

• 第二个坑：错误添加响应头到请求里
  Access-Control-Allow-Origin是服务器返回给浏览器的响应头，用来解决跨域问题的，你在客户端请求里加这个完全没用，而且还重复加了两次，直接删掉就好。

• 第三个坑：credentials的设置要匹配需求
  如果你只是同域请求，credentials: "same-origin"没问题；但如果是跨域请求且需要携带cookie之类的凭证，得改成credentials: "include"，不过这也需要服务器端配合开启对应的配置。

修正后的代码示例 #

// 假设你的token已经正确获取到了
const token = "你的有效token值";
const myHeaders = new Headers();
myHeaders.append("Authorization", token);

const reqOptions = {
  method: "GET",
  headers: myHeaders,
  // mode: "cors", // 这是默认值，可省略
  credentials: "same-origin" // 根据实际需求调整，跨域带凭证就改成"include"
};

fetch('http://localhost:5000/secret', reqOptions)
  .then(response => {
    // 先检查响应状态是否正常
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    return response.json(); // 根据服务器返回格式选择json()或text()
  })
  .then(data => {
    console.log("请求成功，返回数据：", data);
    // 这里处理返回的数据
  })
  .catch(error => {
    console.error("请求出错：", error);
    // 这里处理错误情况
  });

服务器端的必要配置（重要！） #

光改客户端还不够，服务器端必须配置CORS规则，允许前端携带Authorization头。举个Node.js/Express的例子：

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

app.use((req, res, next) => {
  // 允许指定的前端域名跨域，不要用*如果需要带凭证
  res.header("Access-Control-Allow-Origin", "http://你的前端地址（比如localhost:3000）");
  // 明确允许Authorization头
  res.header("Access-Control-Allow-Headers", "Authorization, Content-Type");
  // 如果需要携带凭证（比如cookie），开启这个
  res.header("Access-Control-Allow-Credentials", true);
  next();
});

// 你的接口路由
app.get('/secret', (req, res) => {
  // 这里可以获取req.headers.authorization拿到token
  res.json({ message: "成功拿到受保护的数据" });
});

app.listen(5000, () => console.log("服务器运行在5000端口"));

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