h5微信本地调试 vue_UniApp本地调试H5（谷歌chrome浏览器）跨域问题的解决方法，亲测可用...

UniApp本地调试H5跨域(谷歌chrome浏览器，UniApp内置浏览器不存在此问题)的推荐方案：欺骗浏览器，让浏览器觉得你没有跨域(其实还是跨域了，用的是代理)

客户器端解决方案(亲测可用)：

1、在manifest.json里添加如下跨域代码："h5" : {

"devServer" : {

"port" : 2001,//你H5网址的端口，如:http://localhost:2001/#/pages/index/index

"disableHostCheck" : true,

"proxy" : {

"/api" : {

"target" : "http://localhost:2000",//你api接口的请求地址，可以是域名，也可以是本地api地址，也可以是ip地址

"changeOrigin" : true,

"secure" : false

}

"https" : false

}

2、在你的vue请求页面，如index.vue的代码如下：uni.request({

url: '/api/index/index',

method: 'GET',

success: (res) => {

console.log(res);

}

});

下面这些解释可以不看，照抄上面代码即可

参数说明

"proxy"里的'/api'：捕获API的标志，如果API中有这"/api"个字符串，那么就开始匹配代理，

比如API请求"/api/doc/userinfo"，会被代理到请求 "https://www.df81.com/api/doc"

即：将匹配到的"/api/doc"替换成"https://www.df81.com/api/doc"

客户端浏览器最终请求链接表面是："http://127.0.0.1:2001/api/doc/userinfo"，

实际上是被代理成了："http://localhsot:2000/api/doc/userinfo"去向服务器请求数据

target

代理的API地址，就是需要跨域的API地址。

地址可以是域名,如：https://www.df81.com

也可以是IP地址：http://127.0.0.1:2001

如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败。

pathRewrite

路径重写，也就是说会修改最终请求的API路径。

比如访问的API路径：/api/doc/userinfo，设置pathRewrite: {'^/api' : ''}后

最终代理访问的路径："https://www.df81.com/doc/userinfo"，

将"api"用正则替换成了空字符串，这个参数的目的是给代理命名后，在访问时把命名删除掉。

changeOrigin

这个参数可以让target参数是域名。

secure

secure: false,不检查安全问题。

设置后，可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器

h5微信本地调试 vue_UniApp本地调试H5（谷歌chrome浏览器）跨域问题的解决方法，亲测可用...相关推荐

Thinkphp5.1允许uni-app的H5跨域请求接口解决方法
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法参考文章: (1)Thinkphp5.1允许uni-app的H5跨域请求接口解决方法 (2)https://www.cnblogs. ...
微信小程序执行 wx.reLaunch 后，点击事件失效【已解决，亲测有效】
在使用微信小程序中,有一个场景需要调用 wx.reLaunch到A页面 wx.reLaunch({url: '/pages/index/nologin/nologin', }) 但是 reLaunch ...
vue : 本地调试跨域问题的解决办法：proxyTable
vue : 本地调试跨域问题的解决办法:proxyTable 参考文章: (1)vue : 本地调试跨域问题的解决办法:proxyTable (2)https://www.cnblogs.com/fo ...
谷歌Chrome浏览器开发者工具教程—JS调试篇
上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主 ...
浏览器开发者工具修改html后执行,谷歌Chrome浏览器开发者工具教程—JS调试篇
上一篇咱们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是最经常使用到的Chrome功能面板,也是解决通常问题 ...
js正则检测输入内容为数字,包括负数,整数,浮点数,亲测可用.JS检测整数,js检测浮点数,js检测负数,js检测数字,js限制输入框只输入数字,解决H5 number类型只能输入正数问题.
JS 正则实现数字检测和限制输入,包括整数.浮点数.负数(亲测可用) 网上搜了一下,居然可以直接拿来用的很少,要么就是只能检测正整数.要么是只能检测浮点数,总之很多都不适合,而H5提供的type=&q ...
Keil调试时候提示 The window position data for this project is inconsistent解决方法
CubeMX 6.7.0版本创建Keil MDK项目,调试时候提示 The window position data for this project is inconsistent解决方法造成问题 ...
windows git本地账户迁移，适用于旧电脑换新电脑，亲测可用
由于装了双系统,想要在两个windows系统中使用同一个git账户,故此研究了一番,下面写出具体的操作步骤: 第一步:在新的系统中安装git(详细安装步骤跳过): 第二步:迁移rsa私钥,git默认的 ...
【webview】微信和PC监听浏览器关闭和刷新(亲测可用)
监听浏览器关闭和刷新前言 PC端微信端前言最近做的项目里有一个新的需求,在不同的浏览器内打开的网页,监听用户的操作,比如关闭浏览器,刷新浏览器等等. 这就涉及到了几个平台:PC端浏览器,移动端 ...

h5微信本地调试 vue_UniApp本地调试H5（谷歌chrome浏览器）跨域问题的解决方法，亲测可用...

h5微信本地调试 vue_UniApp本地调试H5（谷歌chrome浏览器）跨域问题的解决方法，亲测可用...相关推荐

最新文章

热门文章