uniapp H5页面设置跨域请求

记录一下本地服务在uniapp H5页面访问请求报跨域的错误

这是我在本地起的服务端口号为8088  ip大家可打开cmd 输入ipconfig 查看 

 

第一种方法

在源码视图中配置

"devServer": {
			"https": false, // 是否启用 https 协议,默认false
			"port": 8080,
			"proxy": {
				"/devapi": {
					"target": "http://XXXXXXXXXX:8088",
					"changeOrigin": true, //是否跨域
					"secure": false, // 设置支持https协议的代理
					"pathRewrite": {
						"^/devapi": ""
					}
				}
			}
		},

 第二种方法 新建vue.config.js

// module.exports = {
// 	devServer: {
// 		port: 8080,
// 		disableHostCheck: true,
// 		proxy: {
// 			"/devapi": {
// 				"target": "http://XXXXXXXXXX:8088",
// 				"changeOrigin": true, //是否跨域
// 				"secure": false, // 设置支持https协议的代理
// 				"pathRewrite": {
// 					"^/devapi": ""
// 				}
// 			}
// 		}
// 	}
// }

因为我这里转发的前缀是 /devapi 所以要在基本请求路径后拼接上前缀(封装请求的文章请看我上一篇)

 这个是我服务的请求路径 (参考) 前端只是加了一个前缀方便转发 

 最后效果图

 

### 解决 UniApp H5 请求问题 #### 修改 `manifest.json` 文件配置 对于 UniApp 开发中的 H5 应用,在遇到访问资源时,可以在项目的根目录下找到并编辑 `manifest.json` 文件。在该文件内的特定位置添加或调整用于开发服务器设置的部分,具体是在 `"h5"` 对象下的 `"devServer"` 中加入代理配置来解决问题[^1]。 ```json "h5": { "devServer": { "port": 8080, "disableHostCheck": true, "proxy": { "/api": { "target": "http://example.com", "changeOrigin": true, "secure": false, "pathRewrite": { "^/api": "" } } } } } ``` 上述 JSON 片段展示了如何通过指定目标 URL (`target`) 和其他选项(如是否更改源(`changeOrigin`)、安全设置(`secure`))来进行反向代理设置,从而绕过浏览器同源策略限制[^5]。 #### 使用 `uni.request()` 方法发起请求 当构建基于 Vue 的应用时,比如使用 UniApp 构建的应用程序,可以利用框架内置的 `uni.request()` 函数发送网络请求。为了确保这些请求能够成功越不同源之间的边界,应当按照官方文档建议的方式编写代码[^2]: ```javascript uni.request({ url: '/public/shoplist', success(res) { console.log('Request succeeded:', res); }, fail(err) { console.error('Request failed:', err); } }); ``` 这里需要注意的是,如果已经设置了前面提到的代理规则,则这里的相对路径 `/public/shoplist` 实际上会被转发给后台服务端的实际 API 地址。 #### 封装统一的请求模块 考虑到实际项目中可能既包含 H5 又有 App 请求的需求,因此推荐创建一个独立的 JavaScript 文件 (例如命名为 `request.js`) 来集中管理所有的 HTTP 请求逻辑,并实现两者间的兼容性处理[^3]。 ```javascript const BASE_URL = process.env.NODE_ENV === 'development' ? '/dev-api' : ''; export default function request(options) { const { url, method = 'GET', data = {} } = options; return new Promise((resolve, reject) => { uni.request({ url: `${BASE_URL}${url}`, method, data, success(response) { resolve(response.data); }, fail(error) { reject(error); } }); }); } // Usage example within a page or component: import request from './utils/request'; async function fetchShopList() { try { const result = await request({ url: '/shoplist' }); console.log(result); } catch (error) { console.error(error); } } ``` 这段代码片段展示了一个简单的封装方式,它可以根据当前环境变量自动切换基础 URL 前缀,使得无论是本地调试还是生产环境中都能正常工作;同时也简化了页面组件内部调用接口的过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值