如何正确设置AXIOS base URL 解决React调用Python API URL前缀异常问题

1. 排查baseURL的格式错误 #

首先检查你的baseURL是否存在以下问题：

• 首尾有没有多余空格、特殊字符，必须是完整的绝对路径，包含http:///https://协议头
• 不要使用大小写混合的协议头，统一用小写的http:///https://
  如果是空格导致的问题，修正后即可正常解析：

// 错误写法（注意baseURL值前面的空格）
baseURL: ' http://127.0.0.1:5000'
// 正确写法
baseURL: 'http://127.0.0.1:5000'

2. 检查全局axios配置是否冲突 #

如果你之前在全局设置过axios.defaults.baseURL，或者用axios.create()创建了实例并设置了baseURL，局部请求的baseURL不会覆盖全局的路径拼接规则，此时可以换用以下两种写法绕开：

写法1：直接在url参数写完整请求地址 #

axios({
  method: 'get',
  url: 'http://127.0.0.1:5000/myendpoint', // 直接写全路径，不需要baseURL
})
.then(res => {
  console.log("data", res.data);
})
.catch(err => {
  console.log("AXIOS ERROR - ", err);
})

写法2：创建独立的axios实例发起请求 #

避免全局配置影响，专门用于请求Python后端接口：

// 先创建独立实例
const pyApi = axios.create({
  baseURL: 'http://127.0.0.1:5000'
})

// 调用的时候直接用实例发请求
pyApi.get('/myendpoint')
  .then(res => {
    console.log("data", res.data);
  })
  .catch(err => {
    console.log("AXIOS ERROR - ", err);
  })

3. 排查跨域配置问题 #

如果是本地开发的React应用用了代理配置（比如package.json里的proxy字段、或者setupProxy.js配置），错误的代理规则也可能导致路径被强制拼接前端域名，检查你的代理规则是否匹配到了后端地址的规则，不需要代理的话直接删掉对应规则即可。

4. 用拦截器确认配置是否被篡改 #

加个请求拦截器打印最终的请求配置，确认baseURL有没有被其他逻辑修改：

axios.interceptors.request.use(config => {
  console.log('请求配置', config)
  return config
})

运行后看控制台打印的baseURL和url字段是否符合预期，就能定位是哪个环节出的问题。

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