以前配置过vue vite 的代理转发,没想到在uniapp的代理转发下翻车了,其实是一个很小的问题。调试过程中,尝试了webpack、vite 等写法 在根目录下 创建了 vite.config.js vue.config.js 都不生效。
最后解决的方法是 Vue3 proxy 的规则,重写规则必须要放在跳转域名前,下面贴配置源码
请求端代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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点均不同,所以肯定会触发跨域(只要有一项不同都会触发跨域)
![](/i/l/?n=23&i=blog/892335/202212/892335-20221215103009989-642316153.png)