以前配置过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)
}
});
}
}
View Code
配置代理代码:
"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
触发跨域的条件是:
- 域名不同
- 端口不同
- 协议不同
对比就发现本地的域名和API的域名以上3点均不同,所以肯定会触发跨域(只要有一项不同都会触发跨域)