热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

uniapp运行到浏览器跨域H5页面的跨域问题解决方案

官方文档对跨域的解决方案推荐:https:ask.dcloud.net.cnarticle35267更方便的解决方案项目根目录直接创建一个vue.config.js文

官方文档对跨域的解决方案推荐:

https://ask.dcloud.net.cn/article/35267

更方便的解决方案

 

项目根目录直接创建一个vue.config.js文件,并在里面配置代理,直接上代码

 

module.exports = {publicPath: './',devServer: {proxy: {'/api': {target: 'https://movie.douban.com',ws: true,changeOrigin: true,pathRewrite: {'^/api': ''}},'/bpi': {target: 'https://douban.uieee.com/',ws: true,changeOrigin: true,pathRewrite: {'^/bpi': ''}}}},pwa: {iconPaths: {favicon32: 'favicon.ico',favicon16: 'favicon.ico',appleTouchIcon: 'favicon.ico',maskIcon: 'favicon.ico',msTileImage: 'favicon.ico'}}
}

  

在相关接口请求处的代码出做修改、如下:

源代码:

 

修改后:

url: 'bpi/v2/movie/top250',

 

这时候跨域问题就解决了,但是会出现另外一个问题图片无法显示报403,这个问题通过添加自定义meta标签可以解决,

图片403问题

但是怎么在uni-app里面添加自定义的meta标签呢,~

 

1.在项目根目录下新建一个html文件;

2. 复制下面的基本模板内容,到这个html文件,

3.在此基础上修改meta和引入js;

 

标准uni-app的模板:


static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />



  

找到新建html文件的heade处:


 

4.在 manifest.json->h5->template 节点中关联这个html文件的路径。找到设置,把刚才自定义的文件引入

 

 

 

这样所有的uni-app的跨域问题就迎刃而解了

 

 

参考资料:

webpack-dev-server
webpack跨域API

 

如果大家有任何疑问即可留言反馈,会在第一时间回复反馈,谢谢大家!

本人使用GSAP框架搭建的个人网站也上线啦!有兴趣可以访问 zhaohongcheng.com 查看,感谢~

本人uni-app影视项目已经重磅开源,一套代码套发布到H5、APP、小程序等多个平台!有兴趣可以访问Dcloud官方插件市场https://ext.dcloud.net.cn/plugin?id=1839 查看,感谢~

本文为Tz张无忌文章,读后有收获可以请作者喝杯咖啡,转载请文章注明出处:https://www.cnblogs.com/zhaohongcheng/

 



推荐阅读
  • HBuilderX入门教程
    本帖文章已集成到:hx产品文档HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能,清爽的界面,强大的 ... [详细]
  • k8s(十一)helm安装premetheus
    1prometheus基础知识1.1prometheus简介Prometheus是一套开源的系统监控报警框架。和Kubernetes类似,它也发源于Google的Borg体系,其原 ... [详细]
  • 如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具,包括Linux主机和Windows主机的文件传输方式,Web运维和FTP/SFTP客户端运维两种方式,以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外,还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK,以及主机迁移服务会收集的源端服务器信息。 ... [详细]
  • uniapp开发H5解决跨域问题的两种代理方法
    本文介绍了uniapp开发H5解决跨域问题的两种代理方法,分别是在manifest.json文件和vue.config.js文件中设置代理。通过设置代理根域名和配置路径别名,可以实现H5页面的跨域访问。同时还介绍了如何开启内网穿透,让外网的人可以访问到本地调试的H5页面。 ... [详细]
  • uniapp开发h5跨域问题
    最近用uni-app开发h5(公众号)发现一个问题,如 ... [详细]
  • uniapp中的样式和数据绑定(五)
    uni-app的样式1.uni-app种的样式1.1使用图标2.uni-app中的数据绑定3.v-bind动态绑定属性4.uni中的事件1.uni-app种的样式rpx即响应式p ... [详细]
  • Android-基于云信实现语音通话功能对于这几个方法的具体解释可以看云信信令的文档,或者这查看方法源码的注释如果是接受对方邀请并且加入频道成功之后,那么可以直接调用加入音视频房间 ... [详细]
  • 【从零到壹】Koa 从理解到实现
    【从零到壹】Koa从理解到实现-【点击查看文中的相关源码】根据官网的介绍,Koa是一个新的Web框架,致力于成为Web应用和API开发领域中的一个更小、更富有表现力和更健壮的基石。 ... [详细]
  • 使用 Kubernetes 和 Istio 构建大规模集群带来的挑战和解决方案
    原文地址:https:blog.houzz.comchallenges-and-solutions-in-building-a-large-scale-cluster-with-k ... [详细]
  • VUE2 实现一个页面 调用 另一个页面的函数
    今天我在Vue 需要实现 一个这样的功能在App.vue页面中 要实现 调用 另一个页(ExtensionMonitor.vue)中的函数 并将参数 传过去下面将实现的步骤写下来, ... [详细]
  • Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中,如Kubernetes、Hugo和Github CLI等。通过使用Cobra,我们可以快速创建命令行工具,适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
  • 服务器上的操作系统有哪些,如何选择适合的操作系统?
    本文介绍了服务器上常见的操作系统,包括系统盘镜像、数据盘镜像和整机镜像的数量。同时,还介绍了共享镜像的限制和使用方法。此外,还提供了关于华为云服务的帮助中心,其中包括产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题和视频帮助等技术文档。对于裸金属服务器的远程登录,本文介绍了使用密钥对登录的方法,并提供了部分操作系统配置示例。最后,还提到了SUSE云耀云服务器的特点和快速搭建方法。 ... [详细]
  • 智能消息服务数字短信使用FAQ
    本文介绍了智能消息服务数字短信的开通流程和操作步骤,包括开通数字短信的路径、申请流程、控制台操作以及API接口对接模式。同时还介绍了数字短信模板的创建规则和要求,包括审核状态的说明和建议。 ... [详细]
  • 本文介绍了自学Vue的第01天的内容,包括学习目标、学习资料的收集和学习方法的选择。作者解释了为什么要学习Vue以及选择Vue的原因,包括完善的中文文档、较低的学习曲线、使用人数众多等。作者还列举了自己选择的学习资料,包括全新vue2.5核心技术全方位讲解+实战精讲教程、全新vue2.5项目实战全家桶单页面仿京东电商等。最后,作者提出了学习方法,包括简单的入门课程和实战课程。 ... [详细]
  • uniapp 页面通讯($emit,$on,$off,$once)
    订单页面onLoad(){uni.$on(getAddress,(data){this.infodata;});},onUnload(){uni.$off(getAddre ... [详细]
author-avatar
杜伟丿2552
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有