uniapp开发H5项目开发环境解决跨域问题
·
通过 manifest.json 配置(H5 端)
以请求http://your-api-server.com/api/user/list接口为例
- 打开 manifest.json文件
- 在 h5节点下添加 devServer配置:
{
"h5": {
"devServer": {
"proxy": {// 代理转发
"/api": {//将你的接口最后公共部分提取出来
"target": "http://your-api-server.com",// 以/api 开头的代理到 target指定地址
"changeOrigin": true,//修改请求头中的 Origin 为目标地址
"secure": false,// 允许代理到 HTTPS 且证书无效的后端
"pathRewrite": {
"^/api": "/api" // 其中请求地址开头的 /api 替换为 '/api'
}
}
}
}
}
}
- 配置好代理后,这样发起请求
uni.request({
url: '/api/user/list', // 注意这里使用相对路径
success: (res) => {
console.log(res.data);
}
});
注意事项
- 仅限开发环境:这些代理配置只在开发环境(npm run dev)生效,生产环境需要后端配置跨域或使用其他解决方案
- 多平台兼容:H5 平台:代理配置有效,小程序/App 平台:需要直接请求完整URL,或使用条件编译
- uni.request() url使用相对路径
- 配置完需重启HbuliderX
更多推荐



所有评论(0)