热门标签 | 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/

 



推荐阅读
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
  • 本文详细介绍了如何在 Vue CLI 3.0 和 2.0 中配置 proxy 来解决开发环境下的跨域问题,包括具体的配置项和使用场景。 ... [详细]
  • spring boot使用jetty无法启动 ... [详细]
  • 从理想主义者的内心深处萌发的技术信仰,推动了云原生技术在全球范围内的快速发展。本文将带你深入了解阿里巴巴在开源领域的贡献与成就。 ... [详细]
  • Jupyter Notebook多语言环境搭建指南
    本文详细介绍了如何在Linux环境下为Jupyter Notebook配置Python、Python3、R及Go四种编程语言的环境,包括必要的软件安装和配置步骤。 ... [详细]
  • 本文探讨了在Windows系统中运行Apache服务器时频繁出现崩溃的问题,并提供了多种可能的解决方案和建议。错误日志显示多个子进程因达到最大请求限制而退出。 ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 高效的JavaScript异步资源加载解决方案
    本文探讨了如何通过异步加载技术处理网页中大型第三方插件的加载问题,避免将大文件打包进主JS文件中导致的加载时间过长,介绍了实现异步加载的具体方法及其优化。 ... [详细]
  • 作为一名新手开发者,我正在尝试使用 ASP.NET 和 Vue.js 构建一个单页面应用,涉及多个复杂组件(如按钮、图表等)。希望有经验的开发者能够提供指导。 ... [详细]
  • vue引入echarts地图的四种方式
    一、vue中引入echart1、安装echarts:npminstallecharts--save2、在main.js文件中引入echarts实例:  Vue.prototype.$echartsecharts3、在需要用到echart图形的vue文件中引入:   importechartsfrom&amp;quot;echarts&amp;quot;;4、如果用到map(地图),还 ... [详细]
  • 大家好,我是李白。本文将分享一个从零开始的全栈项目,涵盖了设计、前端、后端和服务端的全面学习过程。通过这个项目,我希望能够帮助初学者更好地理解和掌握全栈开发的技术栈。 ... [详细]
  •   uni-app开发教程,uni-app实例教程  UNI-APP开发(仿饿)开发课程:进入学习  推荐(免费):uni-app开发教程  文章目录  简介,网 ... [详细]
  • uniapp开发h5跨域问题
    最近用uni-app开发h5(公众号)发现一个问题,如 ... [详细]
  • CRZ.im:一款极简的网址缩短服务及其安装指南
    本文介绍了一款名为CRZ.im的极简网址缩短服务,该服务采用PHP和SQLite开发,体积小巧,约10KB。本文还提供了详细的安装步骤,包括环境配置、域名解析及Nginx伪静态设置。 ... [详细]
  • 本文详细介绍了如何在ARM架构的目标设备上部署SSH服务端,包括必要的软件包下载、交叉编译过程以及最终的服务配置与测试。适合嵌入式开发人员和系统集成工程师参考。 ... [详细]
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社区 版权所有