Next.js中Axios请求被自动添加代理前缀报错，如何正确配置代理

Axios 在 Node.js 环境下运行时（你当前的请求写在 getStaticProps 中，该方法只会在 Next.js 服务端执行），会默认读取当前运行环境的系统代理环境变量（包括 HTTP_PROXY/http_proxy/HTTPS_PROXY 等），你启动 Next.js 服务的环境已经配置了公司全局代理 http://proxy.company.com:12302/，所以请求会被自动加上代理前缀。
而你请求的目标地址是本地服务 http://localhost:4000/posts，走公司代理后代理服务器无法解析本地地址，就会返回504网关超时或403权限错误。

下面提供三种常见的适配方案，可根据你的实际场景选择：

• 方案1：针对当前本地请求直接关闭代理
  在Axios请求的配置项中新增 proxy: false 即可，修改后的代码如下：

  const { data } = await axios.get('http://localhost:4000/posts', {
    proxy: false
  });
  

• 方案2：配置环境变量排除本地地址走代理
  启动项目时设置 NO_PROXY 环境变量，指定 localhost 和本地IP不走全局代理：
  • Mac/Linux 环境下修改 package.json 的启动命令：

    "dev": "NO_PROXY=localhost,127.0.0.1 next dev",
    "build": "NO_PROXY=localhost,127.0.0.1 next build",
    "start": "NO_PROXY=localhost,127.0.0.1 next start"
    

  • Windows 环境下修改启动命令：

    "dev": "set NO_PROXY=localhost,127.0.0.1&& next dev"
    

• 方案3：自定义Axios全局代理配置
  如果你需要指定其他请求走自定义代理，可创建专属的Axios实例，手动配置代理规则，不使用系统默认的环境变量代理：

  // 新建utils/request.js
  import axios from 'axios'
  const request = axios.create({
    // 不需要代理就设为false，需要代理就填写代理服务器信息
    proxy: false
    // 自定义代理示例：proxy: { host: 'your-proxy-host', port: 1234 }
  })
  export default request
  

  后续业务请求都使用这个自定义的Axios实例即可。

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