跨域环境下Axios发送GET请求出现401 Unauthorized错误

核心原因是跨域请求时，浏览器默认不会携带Cookie（或认证Token）到后端，导致GET请求的身份验证失败返回401；而同域场景下浏览器会自动携带Cookie，所以验证通过。

需要给Axios配置跨域携带凭证：

1. 全局Axios配置（推荐）：

// 在项目入口文件（如index.js或api.js）中添加
import axios from 'axios';

axios.defaults.withCredentials = true;

2. 单个请求配置（如果不需要全局生效）：

const startLogin = async (userData) => {
  try {
    // 登录POST请求
    await axios.post('http://10.10.251.187:3000/api/login', userData, { withCredentials: true });
    // 获取用户信息GET请求
    const res = await axios.get('http://10.10.251.187:3000/api/user', { withCredentials: true });
    // 处理返回的用户信息
    console.log(res.data);
  } catch (err) {
    console.error(err);
  }
};

后端必须配置CORS允许携带凭证，同时指定允许的Origin（不能用通配符*，否则浏览器会拒绝携带Cookie）：
以Node.js + Express为例的配置：

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

// 配置CORS，替换为实际前端地址
app.use(cors({
  origin: ['http://localhost:3000', 'http://你的其他服务器域名/IP'],
  credentials: true,
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

// 登录接口
app.post('/api/login', (req, res) => {
  // 登录逻辑：验证用户后设置Session或Cookie
});

// 获取用户信息接口
app.get('/api/user', (req, res) => {
  // 身份验证逻辑：检查Session/Cookie是否有效
});

app.listen(3000, () => console.log('Server running on port 3000'));

• 若用Session认证：需确保Session的Cookie配置SameSite: 'None'和Secure: true（HTTPS环境下），否则跨域时浏览器会阻止Cookie发送。
• 若用JWT Token：如果Token存在Cookie中，同样要保证Cookie的跨域配置正确；也可将Token放在Authorization请求头里，前端每次请求手动携带。

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