如何让Vue3（Vite）项目通过Clash代理并正常访问指定域名API？

你的问题核心是：Vite代理/api到andy.test时，域名解析被Clash拦截，没有使用本地hosts中*.test → 127.0.0.1的映射，导致请求失败。以下两种方案可在保持现有代理配置的前提下解决问题：

方案1：修改Vite代理配置，强制本地解析 #

调整createProxy函数，让代理请求强制使用本地DNS解析目标域名，同时确保跨域请求头正确：

function createProxy(proxyList) {
  const proxyMap = {};
  proxyList.forEach(([prefix, target]) => {
    const targetHost = new URL(target).hostname;
    proxyMap[prefix] = {
      target,
      changeOrigin: true,
      rewrite: path => path.replace(new RegExp(`^${prefix}`), ''),
      // 指定本地DNS服务器，绕过Clash解析
      dns: '127.0.0.1',
      // 手动设置Host头，确保目标服务识别正确域名
      configure: proxyInstance => {
        proxyInstance.on('proxyReq', proxyReq => {
          proxyReq.setHeader('Host', targetHost);
        });
      }
    };
  });
  return proxyMap;
}

修改后重启Vite服务，代理请求会直接通过本地hosts解析andy.test到127.0.0.1，不会被Clash拦截。

方案2：在Clash中添加直连规则 #

如果不想改动Vite代码，可在Clash的配置文件中添加一条高优先级规则，让所有*.test域名的请求走直连：

rules:
  - DOMAIN-SUFFIX,test,DIRECT

这条规则会让Clash不对andy.test这类本地测试域名做代理转发，Vite的请求就能正常使用hosts映射。

验证方法 #

修改配置后，重启对应的服务，打开浏览器开发者工具的Network面板，查看/api开头的请求：

• 确认请求的实际地址是127.0.0.1
• 检查响应状态码是否为200系列，确保请求正常返回

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