如何让 npm run dev 的 vue vite 项目走 clash mixin 代理呢？
tlerbao · 2023-11-02 20:27:45 +08:00 · 1167 次点击这是一个创建于 374 天前的主题，其中的信息可能已经有所发展或是发生改变。
我在 Clash Mixin 中增加了如下配置，目的是让所有.test 结尾的域名指向本机
hosts:
"*.test": 127.0.0.1
问题来了
浏览器可以正常访问 xxx.test ，但是终端工具中 npm run dev 的 vue3 vite 项目始终无法访问到 xxx.test ，export http_proxy=http://127.0.0.1:7890 ，代理终端也不行？
请问怎么解决呢？
 |
1
guanbeilang 2023-11-02 20:37:06 +08:00
把环境变量写到 npm script 里面就可以了：
``` "scripts": { "dev": "http_proxy=http://127.0.0.1:6152 vite", "build": "vite build", "preview": "vite preview" }, ``` |
 |
2
tlerbao OP  |
|
3
guanbeilang 2023-11-02 20:39:49 +08:00
如果上面的方法还是不行的话，你可以尝试把 Clash 设置为 TUN 模式
|
|
4
tlerbao OP @guanbeilang
尝试了还是不行，我 viteconfig 里是这样的防止跨域开启了代理/api 代理到 xxx.test ``` server: { host: "0.0.0.0", port: viteEnv.VITE_PORT, open: viteEnv.VITE_OPEN, cors: true, // Load proxy configuration from .env.development proxy: createProxy(viteEnv.VITE_PROXY) }, ``` |
|
5
tlerbao OP @guanbeilang #3
经过测试，tun 模式也不行 但是，我得 vue2 项目 vuecli 创建的直接访问接口 xxx.test 的项目没问题 而这个 vue3 的项目 我怀疑就是 vite.config 里设置了 server.proxy 导致的 |
|
6
guanbeilang 2023-11-02 20:45:50 +08:00
@tlerbao 从报错看是没走到代理，在 DNS 解析的过程就出错了，可以试试看：
1. 使用 Clash 的 TUN 模式（没试过，不确定 DNS 解析在这个 case 下会不会一起接管） 2. 直接把 xxx.test 写到 hosts 文件里面去（最直接的解法） 3. 自建 DNS ，可以随意控制，不过搭建成本比较高，喜欢折腾可以尝试下 |
|
7
guanbeilang 2023-11-02 20:49:03 +08:00
4. 按你刚才#5 的思路，也可以在 vite 里面配置 hosts ，这个方式很清真，我没试过 https://cn.vitejs.dev/config/server-options.html
|
|
8
tlerbao OP @guanbeilang #6
1. 本来就是每来一个新项目就修改一次/etc/hosts 来增加一条 xxx.test ，感觉麻烦，所以让 clash 接管了 hosts ,让*.test 指向本机。 2. tun 模式试了没用，vue2 项目不用代理终端，不用开 tun ，直连 xxx.test 接口的可以正常访问 3. 我就是怀疑 vue3 项目的 vite config 的 server.proxy 设置了代理导致的 |
|
9
guanbeilang 2023-11-02 21:40:16 +08:00
@tlerbao #8
1. 用 dnsmasq 可以支持通配符 https://blog.csdn.net/qq_44881113/article/details/120607698 2. 你确认下 Clash 是不是正确创建了路由条目，然后用 wireshark 抓包看下 Node 下请求的流量是不是走到了 Clash 新创建的这个网卡，感觉像是 DNS 解析的问题导致没走到 Clash 3. server.proxy 看上去好像是针对 http 的某个路由的转发代理，不是针对请求的代理。 我这边项目是开发、测试、生产分别加载不同的配置文件，每个文件声明不同的请求地址（所以本地开发是直接写 http://localhost:2222/这样） |
|
10
tlerbao OP @guanbeilang #9
clash 这边肯定是没问题了，浏览器，api 调试工具（配置好代理），都能正确访问 xxx.test 包括 npm run dev 启动的 vue2 vue-cli 创建的项目（没配置 server.proxy ），都能正确访问 xxx.test ， server.proxy 这个一般是解决跨域的，跨域代理，问题应该就出在他什么上？ |
 |
11
sjhhjx0122 2023-11-03 08:52:13 +08:00
clash x pro 的增强模式开起来应该就会默认代理走了吧
|
|
12
tlerbao OP @sjhhjx0122 cfw 的 tun 模式相当于增强模式了，没用，我目前选择不用 server.proxy 了
|
 |
13
cookii 2023-11-03 10:35:22 +08:00 via Android
tun 模式，软路由
|
|
14
guanbeilang 2023-11-03 11:44:20 +08:00
@tlerbao #10
Clash 如果配置了 TUN 模式且成功了的话，应该是在 [IP 层] 的接管，TCP 、UDP 和系统的 DNS 解析都是被接管了的。可以 `ping xxx.test` 验证一下有没有配置成功。如果这一步没成功，可能是 Clash 工具的 TUN 模式存在问题，可以试试 Surge 的 Enhance Mode 或者是其它类似工具的 Fake IP 。主要是确保 DNS 解析符合预期。 浏览器和调试工具使用的是 [HTTP 层] 的代理，DNS 的解析行为可能存在差异。 目前怀疑，应该是 vite 的 server.proxy 内的请求逻辑里面，DNS 解析没有走 HTTP 代理，而是通过系统解析来做的。 |
 |
15
chenjiangui998 2023-11-03 14:43:11 +08:00
1. tun 模式
2. 有点曲线救国 用 proxyman 反向代理. 然后 proxy 是支持二级代理的, 二级代理指向 clash 就行 我在公司没有 root 权限就用 2 |
Select Language