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

  • UniApp 运行到浏览器的时候,接口会跨域报错,这里通过两种方式解决,第一:修改Uniapp自带的manifest.json 源码视图并进行配置h5设置。第二:在项目根目录新建vue.config.js并配置代理。 二选一即可。

  • 修改或调整配置文件后,推荐重新运行,以防不生效。

  • 配置完成后,请求接口显示 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)}})})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/253309.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

现代雷达车载应用——第2章 汽车雷达系统原理 2.1节

经典著作,值得一读,英文原版下载链接【免费】ModernRadarforAutomotiveApplications资源-CSDN文库。 2.1 基本雷达功能 雷达系统通过天线或天线阵列向空间辐射电磁能量。辐射的电磁能量“照亮”周围的目标。“被照亮”的目标拦截一些辐射能量&#xff0…

卡码网语言基础课 | 20. 排队取奶茶

目录 一、 队列的基本认识 二、 队列的操作 2.1 引入头文件 2.2 创建队列 2.3 队列的常见操作 三、 解题 通过本次练习,将会学习到以下C知识点: 队列的基本概念(队头、队尾)和特点(先入先出)入队、出队…

履带吊,笔记

0.前言 履带吊使用了与传统的门桥式起重机不同的技术路线。因为它是移动式设备,所以它的动力是燃油发动机。为了精确调控升降。它的整套动力系统似乎采用了某种液压传动系统。履带吊国内也有生产商。但是下文中,还是从国外的一款产品说起。这款产品的pd…

【keepalived】高可用神器,实现应用的自动主备切换

目录 1.概述 2.配置 3.效果 4.keepalived主备切换原理 5.联系作者 1.概述 什么是keepalived: keepalived是一个基于VRRP协议来实现的服务高可用方案。VRRP协议,即虚拟路由冗余协议,其一开始提出来是为了解决局域网中配置静态网关出现单…

在虚拟机中,规划一个文件配额管理系统

两台虚拟机(windows 2008 和 windows XP)都设置为自定义下的仅主机模式Vmnet1,检查IP地址,确认两台虚拟机处于同一网段,并在windows 2008 上ping通 windows XP 一、文件配额管理系统 在window 2008中,添加…

草柴返利APP领淘宝天猫优惠券拿购物返利 淘宝天猫订单如何隐藏删除订单记录?

草柴返利APP领淘宝天猫优惠券拿购物返利 手机安装「草柴」返利APP,复制要购买的商品链接到草柴,查询该商品淘宝天猫优惠券及购物返利,确认收货后到草柴返利APP提取返利; 淘宝天猫订单如何隐藏删除订单记录? 1、打开手…

6.1810: Operating System Engineering 2023 <Lab4 traps: Traps>

一、本节任务 二、要点(Traps and system calls) 有三种事件会使 CPU 暂停当前的指令执行,并强制将控制转移到处理该事件的特殊代码中: 系统调用(ecall);异常(如非法指令&#xff…

Elasticsearch:向量搜索的优势 — 以及 IT 领导者需要它来改善搜索体验的 5 个原因

作者:Evan Castle 与谷歌和亚马逊等高质量搜索引擎的频繁互动提高了客户对快速且相关搜索的期望。 向量搜索(也称为语义向量搜索)利用深度学习和机器学习来捕获数据的含义和上下文。 向量搜索的好处 向量搜索可以增强公司的搜索体验并带来广…

web:[SUCTF 2019]CheckIn(一句话木马,.user.ini)

题目 页面显示 上传文件&#xff0c;随便上传一个文件试试 上传了一个文本&#xff0c;显示失败&#xff0c;不是图片 那就换图片马上传试试 不能包含<?,换一种写法&#xff0c;需要加上GIF89a&#xff0c;进行exif_imagetype绕过 上传成功 这里用.user.ini或者用post传参…

YOLOv8改进 | TripletAttention三重注意力机制(附代码+机制原理+添加教程)

一、本文介绍 本文给大家带来的改进是Triplet Attention三重注意力机制。这个机制&#xff0c;它通过三个不同的视角来分析输入的数据&#xff0c;就好比三个人从不同的角度来观察同一幅画&#xff0c;然后共同决定哪些部分最值得注意。三重注意力机制的主要思想是在网络中引入…

anaconda3的激活和Cvcode配置C++:报错:CondaIOError: Missing write permissions in:

报错&#xff1a;CondaIOError: Missing write permissions in: 原因&#xff1a;anaconda所在文件夹只有root 才有权限 查看用户名 whoamisudo chown -R 用户名 /home/anaconda3激活anaconda3 #激活 source activate #退出 source deactivate 配置Cvcode配置C 首先看g的…

maven生命周期回顾

目录 文章目录 **目录**两种最常用打包方法&#xff1a;生命周期&#xff1a; 两种最常用打包方法&#xff1a; 1.先 clean&#xff0c;然后 package2.先 clean&#xff0c;然后install 生命周期&#xff1a; 根据maven生命周期&#xff0c;当你执行mvn install时&#xff0c…