解决 uniapp 中 http、https 混合的问题

6,585 阅读1分钟

在 uniapp 项目调用后端接口时遇到了一个这样的错误:

image.png

仔细一看原来是在项目中混合使用 http、https 导致的,网站使用的是 https ,由于浏览器的安全机制,屏蔽了 http 请求,只能通过有数字证书的 https 请求,所以在进行 http 请求的时候被阻止了。

http 和 https

首先来看一下 http 和 https 的区别:

  • http 是超文本传输协议,信息是以明文形式传输,所以 http 不适合传输一些敏感信息
  • https 则是具有安全性的ssl/tls加密传输协议

浏览器默认 http 请求是不安全的,所以会拦截

在浏览器中,安全的连接可以看到标识:

image.png

不安全的链接可以看到标识::

image.png

解决http、https 混合的问题

在项目中,有时不可避免的同时使用到 http、https,在无法统一的情况下,可以尝试如下几种解决方案:

方案一

搜索这个报错,网上大部分的解决方案都是在 index.html 的 <head> 标签中添加一段代码:

 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>

方案二

在 manifest.json 文件中修改 Web 配置,将 https 取消勾选,记得配置完成后重启项目

image.png

方案三

如果使用了前两种方案,接口请求依旧是有问题的,可以试试这一种,亲测有效:

点击浏览器地址栏前面的不安全,打开网站设置,将不安全的内容设置为允许:

image.png image.png

配置完成后,重新请求接口,成功。

以上方案都是前端解决的方式,除此之外还可以在后端在服务器上设置响应头来解决。