UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)

简介: UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)

  • 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)
            }
        })
    })
}

相关文章
|
1月前
|
JavaScript
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中,TypeScript编译对效率的影响,以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程,指导读者如何在项目中安装依赖包,并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后,文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
|
18天前
|
算法 安全 Java
微服务(四)-config配置中心的配置加解密
微服务(四)-config配置中心的配置加解密
|
18天前
|
JavaScript
Vue3基础(19)___vite.config.js中配置路径别名
本文介绍了如何在Vue 3的Vite配置文件`vite.config.js`中设置路径别名,以及如何在页面中使用这些别名导入模块。
26 0
Vue3基础(19)___vite.config.js中配置路径别名
|
2月前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
1月前
vue3+uniapp配置路由导航守卫
vue3+uniapp配置路由导航守卫
|
2月前
|
Web App开发 安全 JavaScript
【Azure 应用服务】App Service 通过配置web.config来添加请求返回的响应头(Response Header)
【Azure 应用服务】App Service 通过配置web.config来添加请求返回的响应头(Response Header)
|
2月前
|
缓存 NoSQL 网络协议
【Azure Redis 缓存】如何使得Azure Redis可以仅从内网访问? Config 及 Timeout参数配置
【Azure Redis 缓存】如何使得Azure Redis可以仅从内网访问? Config 及 Timeout参数配置
|
18天前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
33 1
|
2天前
|
JSON 前端开发 Java
【Spring】“请求“ 之传递 JSON 数据
【Spring】“请求“ 之传递 JSON 数据
12 2
|
15天前
|
存储 JSON Go
在Gin框架中优雅地处理HTTP请求体中的JSON数据
在Gin框架中优雅地处理HTTP请求体中的JSON数据