Axios发送GET/POST请求无法访问FastAPI接口问题求助

问题根源 #

1. 认证配置冲突：你同时在请求头里写死了固定Authorization Basic头，又配置了auth参数，axios的auth参数会自动生成新的Authorization头覆盖你写死的内容，你手动配置的固定头实际未生效。之前登录过FastAPI UI后，浏览器缓存了对应站点的认证凭证，请求时自动携带才会成功，清除缓存后无可用凭证就会请求失败。
2. 跨域凭证配置缺失：后端CORS已经开启allow_credentials=True，但前端axios请求没有配置withCredentials: true，浏览器默认不会在跨域请求中携带认证相关凭证，未登录过FastAPI UI的环境自然没有可用凭证，请求直接被拦截。
3. POST请求格式不匹配：你给POST请求设置的content-type是application/x-www-form-urlencoded，但传入的data是JSON对象，格式不匹配会导致后端无法解析请求体，也会触发错误。Postman能正常请求是因为它会主动处理你设置的认证信息，不受浏览器跨域规则限制。

解决方案 #

按以下步骤修改配置即可：

• 清理冗余认证配置：两种认证方式二选一即可，如果你使用用户输入的账号密码做认证，直接删除请求头里固定写死的Authorization字段即可，axios的auth参数会自动生成符合要求的Basic认证头。
• 所有axios请求新增withCredentials: true参数，和后端CORS的凭证配置对应，确保跨域请求时浏览器会正常携带认证信息。
• 修正POST请求的内容格式：
  • 如果你要使用表单格式提交，就用URLSearchParams将data对象转换为表单格式，和你设置的content-type匹配
  • 如果你要使用JSON格式提交，把content-type改为application/json即可，FastAPI默认支持JSON请求体解析，适配成本更低。

优化建议

可以给axios做全局实例配置，避免每个请求重复写相同参数：

import axios from 'axios'

// 全局创建API请求实例
const apiClient = axios.create({
  baseURL: '你的API根地址',
  withCredentials: true,
  headers: {
    'Accept': 'application/json'
  }
})

// 后续请求直接调用实例即可，示例：
// GET请求
await apiClient.get(`/transactions/users/${state.user_id}`, {
  auth: { username: credentials.username, password: credentials.password }
})
// POST请求
await apiClient.post(`/transactions`, {
  user_id: state.user_id,
  // 其余请求体字段
}, {
  auth: { username: credentials.username, password: credentials.password }
})

修改完成后清除浏览器缓存，无需登录FastAPI UI直接测试前端请求即可正常响应。

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