升级Axios至1.4版本后WSL环境下API访问失败问题排查

将Axios从0.27.2升级至1.4版本后，在WSL（Ubuntu 22.04.3 LTS）环境下运行的Next.js应用出现API访问异常：请求返回404 'Not Found'错误，且请求目标主机被莫名替换为私有代理仓库地址verdaccio.local。使用Axios 0.27.2版本时一切正常，且该应用在其他PC上运行无异常。

相关代码：

const headers = { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json' }
headers['Authorization'] = `Bearer ${token}`
return await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/graphql`, JSON.stringify(query), { headers: headers })

环境信息：Node.js 18.17.1，Next.js 13.2.4

• Axios 1.x代理逻辑变更：Axios 1.x版本对代理配置的处理方式与0.27.x不同，会自动读取系统或npm的代理设置。如果你的npm registry配置为verdaccio.local，可能导致Axios将API请求转发到该地址。

  • 检查npm代理配置：执行npm config get proxy和npm config get https-proxy，若存在非预期配置，可临时重置：npm config delete proxy、npm config delete https-proxy。
  • 在Axios请求中明确禁用代理：在请求配置中添加proxy: false，强制绕过代理设置。

• 环境变量解析异常：WSL环境下process.env.NEXT_PUBLIC_API_URL可能未正确加载或被篡改，导致URL拼接错误。

  • 在代码中添加日志打印：console.log('API URL:', process.env.NEXT_PUBLIC_API_URL)，确认变量值是否为预期的API地址。
  • 检查WSL环境变量配置：确保NEXT_PUBLIC_API_URL在WSL终端中已正确导出（如通过.env文件或终端环境变量）。

• URL拼接不规范：Axios 1.x对URL格式的校验更严格，若NEXT_PUBLIC_API_URL末尾包含斜杠，拼接后会出现//graphql的情况，可能触发错误的地址解析。

  • 使用URL对象进行规范拼接：

    const headers = { 
      'Content-Type': 'application/json' 
    }
    headers['Authorization'] = `Bearer ${token}`
    const apiUrl = new URL('/graphql', process.env.NEXT_PUBLIC_API_URL).href
    return await axios.post(apiUrl, JSON.stringify(query), { headers, proxy: false })
    

• WSL网络代理冲突：WSL内部的http_proxy/https_proxy环境变量可能覆盖Axios的请求目标。

  • 在WSL终端中检查代理变量：echo $http_proxy、echo $https_proxy，若存在非预期值，执行unset http_proxy https_proxy临时取消。

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