Vue+Axios传递Bearer token遇401错误，curl/Postman请求正常

从你提供的请求详情来看，问题的核心出在浏览器的CORS预检机制上，具体原因和解决方案如下：

问题根源 #

你的前端发起跨域请求时，浏览器会先发送一个OPTIONS预检请求，询问服务器是否允许携带Authorization头。但从返回的响应头能看到：

Access-Control-Allow-Headers: Content-Type

服务器只允许了Content-Type头，并没有包含你请求里的Authorization，所以浏览器直接拦截了后续的真实请求，返回了401错误。

而curl和Postman不会触发浏览器的CORS预检流程，所以它们能正常发送请求。

解决方案 #

1. 调整服务器端的CORS配置（最关键） #

必须让服务器的Access-Control-Allow-Headers包含Authorization，不同后端框架的配置方式如下：

Spring Boot 示例

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080") // 生产环境替换为你的前端域名
                .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH")
                .allowedHeaders("Content-Type", "Authorization") // 新增Authorization
                .allowCredentials(true);
    }
}

Node.js/Express 示例

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:8080',
  allowedHeaders: ['Content-Type', 'Authorization'], // 新增Authorization
  methods: ['GET', 'POST', 'DELETE', 'PUT', 'PATCH']
}));

2. 优化Axios配置（可选，提升代码可维护性） #

虽然你当前的硬编码token方式本身没问题，但建议用请求拦截器动态设置token，避免硬编码：

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.VUE_APP_API,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器：自动添加Authorization头
api.interceptors.request.use(config => {
  // 实际项目中可以从localStorage/Vuex获取token
  const token = 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIyIn0.wxYD9dllTqT1gAIBmwo35Z4Q4qmlDZwXqz9FdYqXZnU';
  if (token) {
    config.headers.Authorization = token;
  }
  return config;
}, error => Promise.reject(error));

export default api;

3. 可选：开启withCredentials（如果需要携带Cookie） #

如果你的请求需要携带Cookie，记得在Axios配置中加上withCredentials: true，同时服务器端也要开启allowCredentials: true（上面的示例已经包含）。

验证 #

修改服务器配置后，重新发起请求，浏览器的预检请求会得到包含Authorization的Access-Control-Allow-Headers响应，此时真实请求就能正常发送，不会再返回401了。

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