UniApp运行到浏览器的时候，接口会跨域报错，这里通过两种方式解决，二选一即可。- 修改或调整配置文件后，推荐重新运行，以防不生效。
- 配置完成后，请求接口显示
Please enable JavaScript to continue.的话，可以试试重启编辑器（尤其是HBuilderX），再重新运行项目，如果还是不行就另外查查解决方案吧，网上有很多。
一、方式一：修改 manifest.json 文件
- 在
UniApp也有类似配置的地方：找到 manifest.json -》源码视图，添加h5配置项：
"h5" : { "devServer" : { "disableHostCheck" : true, "proxy" : { "/api" : { "target" : "http://www.dzm.com", "changeOrigin" : true, "secure" : false, "ws": false, "pathRewrite" : { "^/api" : "" } } } } }
二、方式二：添加 vue.config.js 文件
UniApp会识别vue.config.js文件，但是manifest.json的优先级
要高于vue.config.js文件，所以看需求选择一个配置即可。- 像
vue开发一样，手动创建一个 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': '' } } } } }
三、使用
- 简单使用
// 请求对象 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) } })
- 封装成请求对象
request.js
// 接口域名 // #ifdef H5 const BaseHost = '/api' // #endif // #ifndef H5 const BaseHost = 'http://www.dzm.com' // #endif // 请求封装 export default function ({ // 请求域名 host = BaseHost, // 请求地址 url, // 请求方式 method, // 请求数据 data = {}, // 请求头 header = {} }) { // 官方请求文档（可查阅传参）https://uniapp.dcloud.io/api/request/request.html // 转为 Promise 结构 return new Promise((resolve, reject) => { // 请求对象 uni.request({ url: host + url, method, data, header: Object.assign({ // 默认请求头 'X-Token': uni.getStorageSync('token') }, header), success: (res) => { // 可以在这里进行成功的公共处理 resolve(res) }, fail: (err) => { // 可以在这里进行失败的公共处理 reject(err) } }) }) }
