UniApp H5跨域问题终极解决方案：两种代理配置方式详解
前言
在UniApp H5项目开发过程中，跨域问题是前端开发者经常遇到的挑战。当我们的前端应用运行在localhost:8080而API接口位于另一个域名时，浏览器出于安全考虑会阻止这种跨域请求。本文将详细介绍两种解决UniApp H5跨域问题的方法，帮助开发者快速配置并解决这一常见问题。
跨域问题概述
跨域问题源于浏览器的同源策略（Same-Origin Policy），这是浏览器最基本的安全功能。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。只有当协议、域名和端口都相同时，才被认为是同源。
在开发环境中，前端应用通常运行在http://localhost:8080，而API接口可能部署在http://api.example.com，这就产生了跨域问题。
解决方案一：修改manifest.json文件
配置步骤
- 在UniApp项目中找到
manifest.json文件 - 点击右下角的"源码视图"切换按钮
- 在JSON结构中添加或修改
h5配置项
完整配置示例
{
"name": "YourAppName",
"appid": "__UNI__XXXXXX",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
/* 其他配置... */
"h5": {
"devServer": {
"disableHostCheck": true,
"proxy": {
"/api": {
"target": "http://www.dzm.com",
"changeOrigin": true,
"secure": false,
"ws": false,
"pathRewrite": {
"^/api": ""
}
}
}
}
}
}
配置参数详解
disableHostCheck: 允许任意主机名访问开发服务器，避免Host检查报错target: 需要代理到的目标API地址changeOrigin: 修改请求头中的Origin值为目标地址，解决跨域问题关键参数secure: 是否验证SSL证书，开发环境可设为falsews: 是否代理WebSocket连接pathRewrite: 路径重写规则，这里将API前缀重写为空
解决方案二：创建vue.config.js文件
配置步骤
- 在项目根目录下创建
vue.config.js文件 - 添加代理配置代码
完整配置示例
// vue.config.js
module.exports = {
devServer: {
disableHostCheck: true,
proxy: {
'/api': {
target: 'http://www.dzm.com',
changeOrigin: true,
secure: false,
ws: false,
pathRewrite: {
'^/api': ''
}
}
}
}
}
注意事项
vue.config.js只能创建在项目根目录，否则无法被识别- 如果同时配置了
manifest.json和vue.config.js，manifest.json的优先级更高 - 推荐选择一种方式配置，避免冲突
请求封装与实践
基础请求示例
// 简单使用示例
uni.request({
url: '/api/mobile/user/userinfo',
method: 'GET',
data: {},
header: {
'X-Token': uni.getStorageSync('token')
},
success: (res) => {
console.log('请求成功', res)
},
fail: (err) => {
console.log('请求失败', err)
}
})
高级封装示例
// utils/request.js
// 接口域名 - 条件编译处理不同环境
// #ifdef H5
const BaseHost = '/api'
// #endif
// #ifndef H5
const BaseHost = 'http://www.dzm.com'
// #endif
// 请求封装函数
export default function request({
host = BaseHost,
url,
method = 'GET',
data = {},
header = {}
}) {
return new Promise((resolve, reject) => {
uni.request({
url: host + url,
method,
data,
header: Object.assign({
'Content-Type': 'application/json',
'X-Token': uni.getStorageSync('token')
}, header),
success: (res) => {
// 可在此处添加统一的成功处理逻辑
if (res.statusCode === 200) {
resolve(res.data)
} else {
reject(res)
}
},
fail: (err) => {
// 可在此处添加统一的失败处理逻辑
reject(err)
}
})
})
}
// 使用示例
import request from '@/utils/request.js'
// 获取用户信息
const getUserInfo = async () => {
try {
const data = await request({
url: '/mobile/user/userinfo',
method: 'GET'
})
console.log('用户信息:', data)
return data
} catch (error) {
console.error('获取用户信息失败:', error)
throw error
}
}
常见问题与解决方案
1. 配置不生效怎么办？
- 检查配置文件位置是否正确
- 确认配置格式是否符合JSON规范
- 重启开发服务器：修改配置后需要重新运行项目
2. 出现"Please enable JavaScript to continue"错误
- 尝试重启HBuilderX或开发工具
- 清除浏览器缓存
- 检查代理目标地址是否可达
3. 生产环境部署问题
上述配置仅适用于开发环境。生产环境部署时，需要：
- 确保API服务器支持跨域（设置CORS头）
- 或使用Nginx等服务器进行反向代理
4. 多环境配置
可以根据不同环境设置不同的代理目标：
// 根据环境变量设置不同目标
const isDevelopment = process.env.NODE_ENV === 'development'
const target = isDevelopment
? 'http://dev.dzm.com'
: 'http://www.dzm.com'
// 然后在代理配置中使用target变量
总结
UniApp H5项目解决跨域问题主要有两种方式：通过修改manifest.json文件或创建vue.config.js文件进行代理配置。两种方式各有优势，开发者可以根据项目需求选择适合的方案。
配置完成后，通过合理的请求封装可以大大提高代码的可维护性和复用性。需要注意的是，代理配置仅适用于开发环境，生产环境需要通过其他方式解决跨域问题。
希望本文能帮助你顺利解决UniApp H5开发中的跨域问题，提高开发效率！
进一步学习：