概述

• 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时，出现跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。