使用相同Token时Axios GET正常但POST请求报401未授权错误

可能的原因 #

• 后端权限校验逻辑差异：GET与POST接口的Token验证规则不一致，比如POST接口未正确读取Authorization请求头，或对Token的权限范围要求更高。
• 请求头未正确传递：POST请求的Authorization头可能被拦截、修改，或代码中存在隐性错误导致头未发送。
• Token权限范围不足：当前Token仅拥有读取项目的权限，不具备创建项目的权限。
• CORS预检处理问题：后端未正确处理OPTIONS预检请求，导致POST请求的Authorization头未被允许。

排查与解决步骤 #

1. 验证POST请求的实际请求头 #

打开浏览器开发者工具的Network面板，找到失败的POST请求，查看Request Headers：

• 确认Authorization头存在且格式正确（Bearer <你的Token>）。
• 对比GET请求的Headers，确保Content-Type为application/json（Axios默认会设置，但需确认后端是否接受该格式）。

2. 检查后端接口的权限配置 #

• 查看后端POST /api/v1/projects接口的校验代码，确认是否与GET接口使用完全一致的Token验证逻辑。
• 查看后端日志，获取401错误的具体触发原因（如Token无效、权限不足、未读取到Authorization头）。

3. 解码Token确认权限范围 #

使用JWT解码工具解析Token，查看payload中的权限字段：

• 确认Token包含创建项目的权限（如permissions: ["create:project"]或类似声明）。
• 确认Token未过期（检查exp字段对应的时间是否晚于当前时间）。

4. 统一配置Axios请求头 #

避免手动重复设置headers，使用Axios全局拦截器统一添加Authorization头，减少出错概率：

// 在代码开头添加全局请求拦截器
axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${userToken}`;
  config.headers['Content-Type'] = 'application/json';
  return config;
});

// 后续GET/POST请求无需手动设置headers
const showProject = async () => {
  try {
    const { data: { projects } } = await axios.get("api/v1/projects");
    // 其余代码保持不变
  } catch (error) { /* 错误处理 */ }
};

formDOM.addEventListener("submit", async (e) => {
  e.preventDefault();
  const projectName = projectNameDOM.value;
  const projectDiscription = projectDiscriptionDOM.value;
  // 其余字段定义
  try {
    await axios.post('/api/v1/projects', { projectName, projectDiscription });
    // 其余代码保持不变
  } catch (error) { /* 错误处理 */ }
});

5. 检查后端CORS配置 #

如果后端启用了CORS，确保配置允许：

• Authorization请求头（在Access-Control-Allow-Headers中添加）。
• POST和OPTIONS方法（在Access-Control-Allow-Methods中添加）。

示例Node.js/Express的CORS配置：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:你的前端端口',
  allowedHeaders: ['Authorization', 'Content-Type'],
  methods: ['GET', 'POST', 'OPTIONS']
}));

内容的提问来源于stack exchange，提问作者Rajeev Singh Jadon