【最新总结】Vue或uni-app之H5跨域的总结【完全实战总结】

最新推荐文章于 2025-07-14 08:19:18 发布

原创最新推荐文章于 2025-07-14 08:19:18 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

50 篇文章

订阅专栏

uni-app

36 篇文章

订阅专栏

本文深入解析Vue或uni-app中H5跨域匹配的原理及配置方法。首先介绍如何通过替换URL中的路径实现跨域，接着讲解如何使用路径重写属性pathRewrite进一步优化跨域请求。案例丰富，适合开发者快速掌握跨域配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue或uni-app之H5跨域匹配的原理：

第一步【正常第一步就够了】：把/api/v1中的第一个/替换成target

如：target=http://127.0.0.1:8099 匹配结果：http://127.0.0.1:8099/api/v1
如：target=http://127.0.0.1:8099/api2/v2 匹配结果为：http://127.0.0.1:8099/api2/v2/api/v1

跨域匹配结果为：http://127.0.0.1:8099/api/v1

 "proxy": {
                # 你的url路径【把第一个/替换成target目标即可,后续URI路径部分不变】
                "/api/v1": {
                    "target": "http://127.0.0.1:8099",
                    "changeOrigin": true //是否跨域，设置为true;(必须)
}

第二步【可以省略】：跨域之后再使用路径重写属性pathRewrite【转换成跨域路径后的结果再重写】

如：配置一："^/api": "/api/v2"
等价于http://127.0.0.1:8099/api/v1 会重写成 http://127.0.0.1:8099/api/v1/v2

第一步跨域匹配路径为：http://127.0.0.1:8099/api/v1
第二步路径重写一次变为：http://127.0.0.1:8099/api/v2/v1

"proxy": {
                "/api/v1": {
                    "target": "http://127.0.0.1:8099",
                    "changeOrigin": true //是否跨域，设置为true;(必须)

                    "pathRewrite": {
                         "^/api/": "/api/v2"
                    }
                }

完整案例：

"h5": {
        "title": "FirstApp",
        "domain": "",
        "devServer": {
            /**
             * Vue跨域匹配的原理：
             第一步：把/api/v1中的第一个/替换成target
             如：target=http://127.0.0.1:8099 匹配结果：http://127.0.0.1:8099/api/v1
             如：target=http://127.0.0.1:8099/api2/v2 匹配结果为：http://127.0.0.1:8099/api2/v2/api/v1
             第二步：跨域之后再使用路径重写属性pathRewrite【转换成跨域路径后的结果再重写】
             如：配置一："^/api": "/api/v2"
                等价于http://127.0.0.1:8099/api/v1 会重写成 http://127.0.0.1:8099/api/v1/v2
             **/
            "proxy": {
                "/api/v1": {
                    //你要跨域的域名(包含host、端口号,切记：一定要带上http头);
                    //同一个域名只能设置一次跨域，否则重复报错！
                    "target": "http://127.0.0.1:8099",
                    "changeOrigin": true //是否跨域，设置为true;(必须)

                    // 会把【跨域转向的路径】的/api开头的路径替换成:http://127.0.0.1:8099/api2/v2
                    // "pathRewrite": {
                    //     "^/api": "/api2/v2" // 设置/api开头路径重写成/api2/v2
                    // }
                }
            },
    }