uniapp vue3下的代理转发不生效问题，亲测有效解决

以前配置过vue vite 的代理转发，没想到在uniapp的代理转发下翻车了，其实是一个很小的问题。调试过程中，尝试了webpack、vite 等写法 在根目录下 创建了 vite.config.js vue.config.js 都不生效。

最后解决的方法是 Vue3 proxy 的规则，重写规则必须要放在跳转域名前，下面贴配置源码

请求端代码：

methods:{
             getList(){
                uni.request({
                    method:"POST",
                    header:{
                        "Content-Type":"application/x-www-form-urlencoded"
                    },
                    url:"/api.php/school/Slide/index",
                    data:{id:9},
                    success:(res) => {
                        console.log(res)
                    },
                    fail:(err) => {
                        console.log(err)
                    }
                });
            }
        }

配置代理代码：

"devServer" : {
            "proxy" : {
                //配置代理服务器来解决跨域问题，uniapp不适用CORS方案和设置JSONP方案
                "" : {
                    //重写规则，调试不写规则，就会默认进入映射域名，调试一定要先让它代理生效
                    "pathRewrite": {
                        "^" : ""
                    },
                    //映射域名
                    "target":"http://school.bjzjxf.com",
                    //是否跨域
                    "changeOrigin":true
                }
            },
            "https" : false,
            "port" : 3000
        },

 

 

百度看大部分声明 vue2不存在这个问题。

接下来说下为什么会有跨域这个问题吧，很多人可能并不太理解。

首先前端 vue 是内置了node.js 映射了一个独立的运行环境，我本地的端口是3000，本地服务器默认IP是 127.0.0.1，调试页面的时候访问是 127.0.0.1:3000 这个域名。

那么跨域请求的API 接口，一般是放在云端服务器，例如：https://school.bjzjxf.com/api/api.php

触发跨域的条件是：

1. 域名不同
2. 端口不同
3. 协议不同

对比就发现本地的域名和API的域名以上3点均不同，所以肯定会触发跨域（只要有一项不同都会触发跨域） 

Referrer Policy:strict-origin-when-cross-origin  // 这个标识就是提示已经跨域请求了

然后为什么使用代理可以解决跨域问题，因为阻止跨域是浏览器的安全协议，防止API接口不合法调用的导致的安全问题。

使用代理就跳过了浏览器检测这块可以这么理解，相当于 静态的html Ajax请求第三方API也不会提示跨域，但是把这个html放到不同的服务器环境下去请求会提示跨域。

所以以下是别人说的话，然后理解我上面说的话。就会发现 只要有2个独立环境下，互相请求对方的接口都不合法，属于跨域。

uni-app 中 只有H5 会存在跨域， 小程序勾选不校验合法域名、web-view(业务域名）、TLS版来忽略跨域，APP不会存在跨域