在uniapp的H5端访问微信接口（如wx.login、wx.getUserInfo等）时，常因跨域问题导致接口调用失败，其核心原因是微信接口需在微信公众平台配置授权域名，而浏览器同源策略会拦截未配置域名的跨域请求，解决方法：登录微信公众平台，在“开发-开发设置-授权域名”中配置H5项目的域名；本地开发时，可在微信开发者工具中勾选“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”临时调试；生产环境必须确保域名已正确配置，否则接口调用会被微信安全策略拦截。
Uniapp H5访问微信接口跨域问题解决方案与实践
在Uniapp开发H5应用过程中,调用微信官方接口（如微信登录、分享、支付、JSSDK等）是一项常见需求，由于浏览器的同源策略（Same-Origin Policy）限制，当H5页面的域名与微信接口域名不一致时（例如本地开发环境http://localhost:8080访问https://api.weixin.qq.com），会触发跨域错误，导致请求被浏览器拦截，无法正常获取数据或调用功能，本文将深入分析Uniapp H5访问微信接口的跨域问题，并提供分场景的解决方案与实践经验。
跨域问题的根源：同源策略
同源策略是浏览器核心的安全机制之一,要求请求的URL必须满足协议、域名、端口三者完全相同，否则浏览器会阻止跨域请求，并在控制台报错：
Access-Control-Allow-Origin不允许http://localhost:8080访问微信官方接口（如api.weixin.qq.com、res.wx.qq.com等）的域名与本地开发、测试或生产环境的域名通常存在差异，因此必然触发跨域限制，这一机制虽然保障了Web应用的安全性，但也给开发带来了诸多挑战。
解决方案：分场景处理
针对不同运行环境（开发环境、生产环境），跨域问题的解决方式各异，需结合Uniapp的特性灵活处理。
（一）开发环境：本地代理配置
开发阶段,H5应用运行在本地服务器（如HBuilderX内置服务器或webpack-dev-server），可通过代理（Proxy）将微信接口请求转发至本地，实现"同源请求"，有效绕过跨域限制。
HBuilderX内置代理（推荐）
在Uniapp项目中,通过修改manifest.json文件配置代理，无需额外搭建服务。
操作步骤：
- 打开
manifest.json，切换到"源码视图"，在h5节点下添加devServer配置：
"h5": {
"devServer": {
"proxy": {
"/api": { // 代理匹配路径（自定义）
"target": "https://api.weixin.qq.com", // 微信接口真实域名
"changeOrigin": true, // 必须开启，表示代理时修改请求头中的origin
"secure": true, // 微信接口是https，需开启
"pathRewrite": { // 可选：路径重写（如/api前缀）
"^/api": ""
}
}
}
}
}
发起请求时,将微信接口的域名替换为本地代理路径：
// 原请求：https://api.weixin.qq.com/sns/jscode2session
// 代理后请求：http://localhost:8080/api/sns/jscode2session
uni.request({
url: '/api/sns/jscode2session', // 使用代理路径
method: 'GET',
data: {
appid: 'your_appid',
secret: 'your_secret',
js_code: 'js_code_from_wx'
},
success: (res) => {
console.log('登录成功', res.data);
}
});
原理：本地开发服务器收到/api开头的请求后，将其转发至https://api.weixin.qq.com，浏览器认为请求是本地同源的，因此不会拦截。
vue.config.js代理（适用于vue-cli项目）
若项目通过vue-cli创建，可在vue.config.js中配置代理：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://api.weixin.qq.com',
changeOrigin: true,
secure: true
}
}
}
};
（二）生产环境：后端代理或Nginx反向代理
生产环境无法像开发环境通过代理工具转发请求,需通过后端服务或Nginx作为中间层，代理微信接口请求。
后端代理（Node.js/Java/PHP等）
前端请求自己的后端接口,后端再调用微信接口，将结果返回给前端，这种方式不仅避免浏览器跨域问题，还能隐藏微信接口的敏感信息（如secret）。
流程：
H5前端 → 后端代理接口 → 微信接口 → 后端返回结果 → H5前端示例（Node.js后端）：
// 后端接口：/api/wechat/login
app.get('/api/wechat/login', async (req, res) => {
const { js_code } = req.query;
const wxUrl = `https://api.weixin.qq.com/sns/jscode2session?appid=your_appid&secret=your_secret&js_code=${js_code}&grant_type=authorization_code`;
try {
// 使用axios请求微信接口
const result = await axios.get(wxUrl);
res.json(result.data);
} catch (error) {
res.status(500).json({ error: '微信接口调用失败' });
}
});
前端调用：
uni.request({
url: '/api/wechat/login',
method: 'GET',
data: {
js_code: 'js_code_from_wx'
},
success: (res) => {
console.log('登录成功', res.data);
}
});
Nginx反向代理
对于使用Nginx作为Web服务器的项目,可通过配置反向代理解决跨域问题：
server {
listen 80;
server
