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

        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
                    // }
                }
            },
    }