uniapp vue3下的代理转发不生效问题，亲测有效解决
2024-10-21 05:05:15
以前配置过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
触发跨域的条件是：
- 域名不同
- 端口不同
- 协议不同
对比就发现本地的域名和API的域名以上3点均不同，所以肯定会触发跨域（只要有一项不同都会触发跨域）
Referrer Policy:strict-origin-when-cross-origin // 这个标识就是提示已经跨域请求了
然后为什么使用代理可以解决跨域问题，因为阻止跨域是浏览器的安全协议，防止API接口不合法调用的导致的安全问题。
使用代理就跳过了浏览器检测这块可以这么理解，相当于 静态的html Ajax请求第三方API也不会提示跨域，但是把这个html放到不同的服务器环境下去请求会提示跨域。
所以以下是别人说的话，然后理解我上面说的话。就会发现 只要有2个独立环境下，互相请求对方的接口都不合法，属于跨域。
uni-app 中 只有H5 会存在跨域， 小程序勾选不校验合法域名、web-view(业务域名）、TLS版来忽略跨域，APP不会存在跨域
最新文章
- S2SH+mysql-软件开发实际部署问题-8个小时后提示MYSQL数据库无法连接
- Node.js高效按行输出文件内容
- 经典功率谱估计及Matlab仿真
- CSS布局（下）
- Android学习网站
- RMAN_学习笔记2_RMAN Setup配置和监控
- (转) xcodebuild和xcrun自动化编译ipa包 笔记
- 【C++继承与派生之二】有子对象的派生类的构造函数
- 经典排序算法 - 归并排序Merge sort
- 关于input在li列表中居中显示
- dede list列表页和文章页分别使用if else
- updateXML 注入 python 脚本
- iOS日历控件
- js配置文件路径和项目目录文件夹位置的一致性
- margin-top / padding-top 的百分比 到底是多少？
- siege压力测试工具安装和介绍
- array 的方法
- 一种C#泛型方法在lua中表示的设计
- python反编译chm文件并生成pdf文件
- Ubuntu 16.04服务器 配置