如何让 npm run dev 的 vue vite 项目走 clash mixin 代理呢? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
tlerbao
V2EX    程序员

如何让 npm run dev 的 vue vite 项目走 clash mixin 代理呢?

  •  
  •   tlerbao 2023-11-02 20:27:45 +08:00 1741 次点击
    这是一个创建于 707 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我在 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 ,代理终端也不行?

    请问怎么解决呢?

    15 条回复    2023-11-03 14:43:11 +08:00
    guanbeilang
        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"
    },
    ```
    tlerbao
        2
    tlerbao  
    OP
       2023-11-02 20:37:08 +08:00
    guanbeilang
        3
    guanbeilang  
       2023-11-02 20:39:49 +08:00
    如果上面的方法还是不行的话,你可以尝试把 Clash 设置为 TUN 模式
    tlerbao
        4
    tlerbao  
    OP
       2023-11-02 20:40:10 +08:00
    @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)
    },
    ```
    tlerbao
        5
    tlerbao  
    OP
       2023-11-02 20:44:23 +08:00
    @guanbeilang #3
    经过测试,tun 模式也不行
    但是,我得 vue2 项目 vuecli 创建的直接访问接口 xxx.test 的项目没问题

    而这个 vue3 的项目 我怀疑就是 vite.config 里设置了 server.proxy 导致的
    guanbeilang
        6
    guanbeilang      2023-11-02 20:45:50 +08:00
    @tlerbao 从报错看是没走到代理,在 DNS 解析的过程就出错了,可以试试看:
    1. 使用 Clash 的 TUN 模式(没试过,不确定 DNS 解析在这个 case 下会不会一起接管)
    2. 直接把 xxx.test 写到 hosts 文件里面去(最直接的解法)
    3. 自建 DNS ,可以随意控制,不过搭建成本比较高,喜欢折腾可以尝试下
    guanbeilang
        7
    guanbeilang  
       2023-11-02 20:49:03 +08:00
    4. 按你刚才#5 的思路,也可以在 vite 里面配置 hosts ,这个方式很清真,我没试过 https://cn.vitejs.dev/config/server-options.html
    tlerbao
        8
    tlerbao  
    OP
       2023-11-02 20:50:20 +08:00
    @guanbeilang #6
    1. 本来就是每来一个新项目就修改一次/etc/hosts 来增加一条 xxx.test ,感觉麻烦,所以让 clash 接管了 hosts ,让*.test 指向本机。
    2. tun 模式试了没用,vue2 项目不用代理终端,不用开 tun ,直连 xxx.test 接口的可以正常访问
    3. 我就是怀疑 vue3 项目的 vite config 的 server.proxy 设置了代理导致的
    guanbeilang
        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/这样)
    tlerbao
        10
    tlerbao  
    OP
       2023-11-02 21:59:38 +08:00
    @guanbeilang #9
    clash 这边肯定是没问题了,浏览器,api 调试工具(配置好代理),都能正确访问 xxx.test

    包括 npm run dev 启动的 vue2 vue-cli 创建的项目(没配置 server.proxy ),都能正确访问 xxx.test ,

    server.proxy 这个一般是解决跨域的,跨域代理,问题应该就出在他什么上?
    linkopeneyes
        11
    linkopeneyes  
       2023-11-03 08:52:13 +08:00
    clash x pro 的增强模式开起来应该就会默认代理走了吧
    tlerbao
        12
    tlerbao  
    OP
       2023-11-03 10:10:21 +08:00
    @sjhhjx0122 cfw 的 tun 模式相当于增强模式了,没用,我目前选择不用 server.proxy 了
    cookii
        13
    cookii  
       2023-11-03 10:35:22 +08:00 via Android
    tun 模式,软路由
    guanbeilang
        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 代理,而是通过系统解析来做的。
    chenjiangui998
        15
    chenjiangui998  
       2023-11-03 14:43:11 +08:00
    1. tun 模式
    2. 有点曲线救国 用 proxyman 反向代理. 然后 proxy 是支持二级代理的, 二级代理指向 clash 就行

    我在公司没有 root 权限就用 2
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     3328 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 10:41 PVG 18:41 LAX 03:41 JFK 06:41
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86