概述

HBuilderX 2.5.1
uniapp中提供了uni.request进行向http请求数据（可以理解为ajax请求）。
uni.request 不支持 jsonp。
一种办法是：在uni-app 的项目中 manifest.json文件中配置跨域代理

manifest.json编辑

使用源码视图进行编辑

manifest.json文件配置

在manifest.json中编辑h5节点（没有可以手动添加）：

"h5" : {"devServer" : {"port" : 80,"disableHostCheck" : true,"proxy" : {"/api" : {"target" : "http://xxx.mydomain.com","changeOrigin" : true,"secure" : false}}}}

调用

接口地址：http://xxx.mydomain.com/api/getCity

uni.request({url: '/api/getCity',method: 'GET',data: {},success: res => {console.log(JSON.stringify(res))},fail: () => {},complete: () => {}
});

特殊说明一下

manifest.json文件中配置的proxy信息为如下时：

"h5" : {"devServer" : {"port" : 80,"disableHostCheck" : true,"proxy" : {"/api" : {"target" : "http://xxx.mydomain.com","changeOrigin" : true,"secure" : false}}}}

表示以/api开头的请求前面添加上http://xxx.mydomain.com。比如uni.request请求/api/getCity，则实际请求地址为http://xxx.mydomain.com/api/getCity。

如果我的接口地址没有前缀怎么办？比如是这样的：http://api.mydomain.com/getCity、http://api.mydomain.com/getUser。可以使用pathRewrite进行path重写。可以这样配置：

"h5" : {"devServer" : {"port" : 80,"disableHostCheck" : true,"proxy" : {"/api" : {"target" : "http://xxx.mydomain.com","changeOrigin" : true,"secure" : false,"pathRewrite":{"^/api":""}}}}}

这样配置后，uni.request请求/api/getCity，则实际请求地址为http://xxx.mydomain.com/getCity。

再特殊说明一下

HBuilderX支持热部署。但，不通过HBuilderX修改manifest.json文件时，则不会热部署。修改完manifest.json文件后，手动重新发布H5 app才能生效。

uniapp H5页面使用uni.request时，出现跨域问题相关推荐

解决uni.request时uni.showtoast无效问题
问题描述封装API请求的时候,uni.request时uni.showtoastw无效: var promise = new Promise((resolve,reject) => {var ...
m3u8下载时出现跨域的解决方法
m3u8下载时出现跨域复制下面的代码当无法下载,资源发生跨域限制时,在视频源页面打开控制台,注入代码解决,点击复制下面代码 // 注入htmllet $section = document.crea ...
angular5使用httpclient时解决跨域问题
angular5使用httpclient时解决跨域问题参考文章: (1)angular5使用httpclient时解决跨域问题 (2)https://www.cnblogs.com/modou/p/ ...
SpringBoot中配置拦截器时，跨域失效
SpringBoot中配置拦截器时,跨域失效前后段分离的项目,配置了跨域后,访问正常,但是配置了拦截器以后,有的访问正常,有的出现跨域问题,发现出现跨域问题的都是拦截器里面没有放行的请求. @Con ...
uni 在app中引入h5页面（uni编写）
关于在app中引入网页,使用的webview标签相对于uniapp 官网给出的webview使用方法在这里https://uniapp.dcloud.io/component/web-view 但是 ...
uniapp h5 页面解决 ios 长按无法保存图片问题（安卓支持此功能）--实现移动端长按保存图片
H5 页面移动端实现长按保存图片以及图片显示异常问题 uniapp 中的一些小坑: h5 页面 image 标签中的 src 属性不支持写 @ ,将image 标签修改为 img标签即可. un ...
uniapp h5页面在移动端使用clipboardone.js插件实现写入剪切板 -- 安卓和ios安美适配（仅测试部分机型）
unipp 中的向剪切板写入内容的 api 不支持 h5页面,我们可以通过clipboardone.js 第三方插件来实现向剪切板写入内容下载包 npm npm install clipbo ...
h5页面嵌入android app时遇到的问题
1.h5页面通过 .css("transform") 或 .style.transform 获取 transform属性,并通过 split 方法解析页面translateY ...
uniapp H5页面嵌入微信小程序 ios 下 video组件播放视频设置 border-radius overflow:hidden 不生效
在ios 系统中, 设置border-radius 可能会不生效(安卓有效),直接给要设置的元素设置 border-radius属性,再添加下面的代码即可实现功能: -webkit-backface- ...

uniapp H5页面使用uni.request时，出现跨域问题

概述

manifest.json编辑

manifest.json文件配置

调用

特殊说明一下

再特殊说明一下

uniapp H5页面使用uni.request时，出现跨域问题相关推荐

最新文章

热门文章