【UniApp】uniapp跨域
问:为什么会有跨域问题?
由于浏览器的同源策略导致的,是浏览器的一种安全保护机制。
浏览器从一个域名的网页去请求另一个域名的资源时,协议、域名、端口 任一不同,都是跨域
解决uniapp的跨域问题有很多方式,下面总结一下常用的几种方式
1. 使用 jsonp,可在我们封装的网络通讯中添加
dataType:'jsonp'
总结:
但是此种方式仅支持 get 请求,post好像用不了。
具体可参考:https://www.imooc.com/article/291931
2. 在uniapp根目录下的 manifest.json 添加
"h5": { "devServer": { "proxy": { "/8888": { "target": "https://www.baidu.com/api", "changeOrigin": true, "pathRewrite": { "^/8888": "/" } }, "/8800": { "target": "https://www.taobao.com/api", "changeOrigin": true, "pathRewrite": { "^/8800": "" } } } } },
总结:
此种方式虽然没有其它方式灵活,但是 是最适用于uniapp的,毕竟是官方提供的配置文件。
具体参照:https://uniapp.dcloud.io/collocation/manifest?id=h5
3. uniapp根目录下新建文件 vue.config.js ,然后在里面添加
module.exports = { devServer: { proxy: { '/dev': { target: 'https://www.baidu.com/api', changeOrigin: true, pathRewrite: { '^/dev': '' } } }, } }
总结:
此种配置方式,vue2可能会失效。如下图:
具体参照:https://cli.vuejs.org/zh/config/#devserver-proxy
如果是 vue2 配置跨域,可参照 :https://blog.csdn.net/weixin_45679977/article/details/103004678
4. 解除Google浏览器的跨域限制
TASKKILL /F /IM chrome.exe
start chrome.exe --args --disable-web-security --user-data-dir
pause
总结:
记得重启浏览器
具体参照:https://blog.csdn.net/MisTTT/article/details/75976123
5. 其它方式
(1). 直接运行在 hbuilderx 的内置浏览器内,uniapp官方在内置浏览器内做过跨域处理
(2). 下载Google浏览器一个可支持跨域的拓展程序:https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
猜你喜欢
- 【UniApp】uniapp怎么判断是否安装微信
- 随着移动互联网的发展,微信已经成为了国内用户相对来说最为普及和使用最为广泛的社交工具。对于一些涉及到微信相关功能的应用程序开发者来说,需要在程序中加入判断用户是否已经安装了微信应用,以便在用户没有安装微信的情况下给出相应的提示或选择其他途径实现相关功能。在uniapp开发中,我们可以使用uniapp自带的uni.getProvider()函数来判断当前设备是否安装了某个提供商的应用程序。而微信作为目前国内使用最为广泛的社交工具之一,这里我们主要介绍如何使用uni.getProvider
- 【UniApp】uniapp怎么跳转页面?两种方式介绍
- uni-app 是一个基于Vue.js的跨平台开发框架,我们可以用它来开发基于H5、小程序、Android/iOS等多平台的应用程序。其中,页面跳转是一个非常关键的功能,本文将会介绍uni-app中常见的两种页面跳转方式,分别是路由跳转和页面间事件通信。一、路由跳转路由跳转是指在uni-app中通过改变页面url的方式来跳转到不同的页面。uni-app提供了一套路由跳转的API,包括:uni.navigateTo()使用 uni.navigateTo() 可以跳转到应用的非底部导航栏页
- 【UniApp】uniapp路由怎么配置
- 随着移动应用的普及和需求的增加,越来越多的开发者开始使用跨平台开发技术来构建应用程序。UniApp作为一个跨平台的开发框架在这个趋势下逐渐崭露头角,并且受到越来越多开发者的欢迎。在使用UniApp开发应用程序的过程中,路由是一个非常重要的组成部分,它允许你在不同页面之间进行导航。在UniApp中,路由用于控制应用程序的页面跳转和导航。如果你已经熟悉了Vue.js的路由机制,那么在使用UniApp的路由时,你将会感到非常熟悉。UniApp的路由机制可以很好地兼容Vue.js的路由,并且提
- 【UniApp】利用uniapp实现图片压缩功能
- 利用uniapp实现图片压缩功能随着手机拍照功能的提升,我们在日常生活中经常会拍摄大量的照片。然而,这些高像素的照片占据了手机的存储空间,使手机变得缓慢且容易存满。为了解决这个问题,我们可以利用uniapp中的相关技术,实现图片压缩功能,将图片压缩至更小的文件大小,保留合适的像素和画质。下面我们将详细介绍在uniapp中如何实现图片压缩功能。步骤一:引入相关插件首先,我们需要在uniapp项目中引入相关的插件。最常用的图片压缩插件是uni-image-compress,它基于image
- 【UniApp】Flutter与uniapp的异同:从框架架构到开发语言的对比
- 在移动应用开发领域,Flutter和uniapp都是备受关注的跨平台框架,它们在很多方面都具有相似之处,但也存在着一些个别的差异。本文将从框架架构、开发语言以及跨平台能力等方面对比Flutter和uniapp,以帮助开发者更好地选择适合自己项目的开发工具。一、框架架构Flutter是由Google开发的开源框架,其核心特点是使用Dart语言进行开发。Flutter的框架架构是基于自绘引擎的方式,通过渲染引擎直接绘制UI界面,不依赖于平台的原生控件。这种方式使得Flutter具有较高的灵活性和自定
- 【UniApp】uniapp实现如何使用JSBridge实现与原生交互
- uniapp实现如何使用JSBridge实现与原生交互,需要具体代码示例一、背景介绍在移动应用开发中,有时需要与原生环境进行交互,比如调用原生的一些功能或获取原生的一些数据。uniapp作为一种跨平台的移动应用开发框架,提供了一种方便的方式来实现与原生交互,即使用JSBridge进行通信。JSBridge是一种前端与移动原生端进行交互的技术方案,通过在前端和原生端分别实现一个桥梁,使得前端可以调用原生的方法和获取原生的数据,同时原生也可以通过桥梁向前端发送消息。二、JSBridge的实
- 【UniApp】uniapp中使用PhotoSphereViewer全景图
- 近期有个项目要用到全景图,就开始研究做了一个demo,每次使用一个新东西,迎接的都是挑战本案例是在uniapp中引入全景图,插入markers节点:1. 下载依赖包npm install photo-sphere-viewer安装之后下载下来的包含 three.js uevent.js photo-sphere-viewer注: 可以不用在当前项目下创建node_modules,只需要把用到的文件复制到项目目录下即可2.uniapp中使用es6引入外部
- 【UniApp】使用uniapp实现日历功能
- 使用uniapp实现日历功能随着移动互联网的发展,日历功能成为了许多APP和网站的必备组件之一。在uniapp这个跨平台开发框架中,我们可以很方便地实现日历功能,并且兼容多个平台,包括iOS、Android等。首先,我们需要用到uniapp的组件库中的日期选择器。uniapp提供了picker组件,其中mode属性可以设置为"date"来实现日期选择。具体代码如下:<template> <view> &nb
- 【Python】最全整理!37 个 Python Web 开发框架总结
- 【PHP】PHP中的ob系列函数
- 【PHP】php逻辑测试,测试也要设计—phpunit实践
- 【UniApp】移动框架对比:uniapp和flutter选哪个好
- 【PHP】微服务架构综合实战 一文让你了解什么是微服务 使用PHP 搭建微服务框架 最全微服务架构讲解以及演示
- 【Go】Golang标准库介绍(二)
- 【前端】常用CMS网站框架介绍
- 【Python】利用Python和WebDriver扩展自动化处理网页的滑动验证码
- 【UniApp】UniApp原生讯飞语音插件-YL-SpeechRecognition
- 【UniApp】最新使用uniapp本地打包APP安卓,已排坑