[vite] http proxy error

[ghost]

Describe the bug

用proxy代理到k8s环境的后台服务（https），当然，后台服务能够正常使用。
{
changeOrigin: true,
secure: false,
target: ‘https://xxxx.com’
}
mac启动服务后，比如浏览器同时发送了10个请求，会有随机几个一直pending，不能返回数据。
windows环境没有这个问题。
控制台报错
[vite] http proxy error:
Error: connect ETIMEDOUT' xx.xx.xx.xx:443'
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)

Reproduction

none

System Info

vite:2.9.9
system:12.3.1 
cpu:六核Intel Core i7
node:v16.15.0
browsers:chrome 101.0.4951.64

Used Package Manager

yarn

Logs

15:51:26 [vite] http proxy error:
Error: connect ETIMEDOUT ip:443
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[tinystorm]

终于找到相同问题的人了，这个问题从webpack到vite，一直存在。真的好烦啊！
之前找到个解决方法 网线连接并且请求头上加keep-alive 可以解决问题，但是刷新页面后又会出现，根本治标不治本。
我一度怀疑是我的mac网络模块出现了问题，这世界上用mac开发者那么多，为啥没人提出问题呢。

[nikolausliu]

兄嘚，你问题解决了吗，windows也发现了这个问题

[tinystorm]

没有啊，不过好像如果接口响应特别快的话，好像会没有问题。
比如部署在ssd上的接口

[ghost]

        agent: new https.Agent(),

[tinystorm]

展开说说？

[eeeeeeeason]

蹲一个答案

[rbt7777]

有解决的吗？？？

[Pluuuto]

请问这个问题有解决方案吗？mac上遇到了相同的问题

[lokiwiki]

检查自己配置的代理的api 是否可行， ETIMEDOUT 一般因为代理请求此api 超时报错的，跟vite代理没关系

[tinystorm]

@lokiwiki 目标api肯定是可用的，这个问题其实已经有很多mac的开发者遇到了。我最近也尝试去解决这个问题。当后台服务部署在ssd上，也就是说访问速度很快的时候，这个问题可以得到极大的缓解约等于没有。但是当网络环境比较复杂时或者部署在hdd上时候，总之就是所有可能导致api访问速度不快的时候，但绝对不是慢，届时就会出现这个问题。
更为奇怪的是，我们组用Mac的同事都有这个问题，使用Windows的同事全都没有。所以我怀疑是否是Mac版本的某项配置，比如重试、超时时间、容错机制之类的导致了这个问题。

[fc]

If you use a proxy that doesn’t use node/vite (golang, or caddy etc) does that work? Maybe a bug in http-proxy or http? I ran into problems using vite’s proxy so don’t use it anymore

[tinystorm]

兄弟们终于找到方法了，根据Tnon大佬给的方法。手动配置代理的agent，但是在我的环境上需要额外配置一些内容

完整的配置如下

const setupProxy = () => {
  const httpOptions = {
    target: 'http://xx.xx.xx.xxx:xx/',
    changeOrigin: true,
    agent: new HttpAgent({keepAlive: true, keepAliveMsecs: 20000})
  }

  return {
    '/api': httpOptions
  }
}

export default setupProxy

[sixawnstar]

HttpAgent 那里来的呢

[bqdcc]

working

// vite.config.ts
import { Agent } from 'node:http';

server: {
    host: '0.0.0.0',
    port: port,
    open: true,
    https: false,
    proxy: {
      '***': {
        target: '***',
        ws: true,
        changeOrigin: true,
        agent: new Agent({ keepAlive: true, keepAliveMsecs: 20000 }), // add this line
      },
    },
  },

[iscottt]

亲测有用

[zhaxie]

顶上去，终于找到解决办法了，牛逼牛逼

[feng-ye-cjl]

// vite.config.ts 修改如下配置可以解决，注意导入的包
import * as http from 'https'; // add this line
proxy: {
  '/***': {
    target: 'https:***',
    changeOrigin: true,
    agent: new http.Agent({ keepAlive: true, keepAliveMsecs: 20000 }) // add this line
  }
}

[shenjo]

我最近升级了node版本之后也遇到了这个问题，搜索了之后 stackoverflow上的这个回答解决了我的问题。
简单来说就是把localhost换成127.0.0.1

[davidLi17]

可以了,用了你的解决方案我的解决了,还得是Github,问了半天AI没解决问题

[ishowman]

这个问题有没有关联的 issue 呢？看评论区的解决方案也挺麻烦的

[GallantXK]

yarn add agent-base
yarn add http

import http from "http";
agent: new http.Agent({keepAlive: true, keepAliveMsecs: 20000})

根据上面老哥的代码 这样添加后解决了问题

[namoshizun]

根因是node 17以后修改了dns resolution order，默认将localhost解析为ipv6的": :1"。但如果你的后端服务监听地址是localhost:xxxx，这就导致了不匹配。解决办法有两个，我个人更倾向第二个：

1. 不用localhost，将proxy配置中的target的地址改成使用127.0.0.1 （其他人已谈到的解决方案）
2. 强制node使用ipv4优先的域名解析，设置node options即可：

export NODE_OPTIONS="--dns-result-order=ipv4first"
vite

[zhouxianjun]

我草，终于找到组织了。解决了我这个问题。感谢🙏

[SpiritQAQ]

从 chimurai/http-proxy-middleware#710 追过来的
感谢TinyStorm兄弟

[XB-Paul]

解决了我这个问题。感谢🙏