React中使用Axios服务层无需Header Token授权请求的问题排查

问题详情 #

之前通过手动提取Cookie中的Token，添加Authorization请求头完成授权：

const token = Cookies.get("token");
const headers = { Authorization: `Bearer ${token}` };

现在创建了带withCredentials: true的Axios实例，希望通过浏览器自动携带Cookie完成授权，无需手动设置请求头，但请求时触发两个错误：

Access to XMLHttpRequest at 'http://localhost:3000/provider/myJobs' from origin 'http://localhost:5173' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

GET http://localhost:3000/provider/myJobs net::ERR_FAILED 401 (Unauthorized)

相关代码如下：

Axios实例配置 #

export const api = axios.create({
  withCredentials: true,
  baseURL: import.meta.env.VITE_API_URL,
});

服务请求代码（providerService.js） #

import { api } from "./axiosConfig";

export const providerService = {
  getJobs: async () => {
    const response = await api.request({
      url: "/provider/myJobs",
      method: "GET",
      withCredentials: true,
    });
  },
};

前端请求实现 #

useEffect(() => {
  const fetchData = async () => {
    try {
      const jobs = await providerService.getJobs();
      console.log(jobs);
    } catch (error) {
      // console.error(error);
    }
  };

  fetchData();
}, []);

解决步骤 #

1. 修正后端CORS配置 #

当请求携带凭证（withCredentials: true）时，后端不能将Access-Control-Allow-Origin设为通配符*，必须指定具体的前端域名，同时开启允许凭证的响应头。

示例（Node.js/Express）

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:5173', // 替换为你的前端实际域名
  credentials: true // 允许请求携带凭证
}));

示例（Spring Boot）

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true);
    }
}

2. 确保Cookie传递与后端识别逻辑匹配 #

withCredentials: true仅负责让浏览器自动携带Cookie，还需满足：

• Cookie的Domain、Path设置正确，确保前端域名能访问到该Cookie。
• 后端需修改身份验证逻辑，从Cookie中提取凭证（如Token），而非依赖Authorization请求头。如果后端原本只解析请求头Token，必须调整代码读取Cookie。

3. 优化Axios请求代码 #

Axios实例已全局设置withCredentials: true，请求中无需重复配置；同时原getJobs函数未返回响应数据，调用方会拿到undefined，需修正：

// providerService.js
import { api } from "./axiosConfig";

export const providerService = {
  getJobs: async () => {
    const response = await api.get("/provider/myJobs");
    return response.data; // 返回接口数据
  },
};

4. 排查401的额外可能 #

若CORS问题解决后仍出现401：

• 打开浏览器开发者工具（Application -> Cookies），确认目标Cookie存在，且域名、路径、有效期正常。
• 验证后端是否正确解析Cookie中的凭证并完成身份验证。
• 尝试重新登录，获取有效的授权Cookie。

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