uniapp前端代理跨域配置
时间: 2025-06-29 18:22:11 浏览: 19
### UniApp 中配置前端代理解决跨域问题的方法
#### 创建 `vue.config.js` 文件并配置代理
为了使开发环境中的请求能够正常工作而不受同源策略的影响,可以在项目的根目录下创建名为 `vue.config.js` 的文件,并按照如下方式设置代理:
```javascript
module.exports = {
devServer: {
disableHostCheck: true,
proxy: {
"/h5api": {
target: "https://tiyu.baidu.com",
changeOrigin: true,
secure: false,
pathRewrite: { "^/h5api": "/" }
}
}
}
};
```
这段代码的作用是在本地开发环境中将 `/h5api` 开头的 URL 请求转发给指定的目标地址 `https://tiyu.baidu.com`[^1]。
#### 修改 H5 部分配置实现代理功能
另一种方法是通过修改 `manifest.json` 文件内的 H5 设置来完成同样的目的。具体做法是在该 JSON 对象下的 `devServer` 字段内增加相应的 `proxy` 参数定义:
```json
{
...
"h5": {
"devServer": {
"https": false,
"port": 8080,
"proxy": {
"/test": {
"target": "http://192.168.5.20:8080",
"changeOrigin": true,
"secure": false,
"pathRewrite": { "^/test": "" }
},
"/online": {
"target": "https://app.com",
"changeOrigin": true,
"secure": false,
"pathRewrite": { "^/online": "" }
}
}
},
"router": {
"mode": "history"
}
}
}
```
这里展示了两个不同的路径映射规则:一个是针对内部测试服务 `/test`;另一个则是线上接口 `/online`。当应用程序尝试访问这些前缀对应的资源时,实际会向设定好的目标服务器发起请求[^3]。
#### 使用 hbuilderX 内置浏览器调试免去跨域烦恼
值得注意的是,在使用官方推荐的编辑工具——hBuilderX 进行开发时,如果只是单纯地想要在内置浏览器中预览效果,则不需要额外处理任何关于跨域的问题,因为此环境下已经默认支持了跨域资源共享(CORS)。
阅读全文
相关推荐




















