前端- 在本地环境使用 HTTPS 协议调试

一、问题

我们线上环境本来是用的 https 协议，但是其中一个功能接口需要其他部门提供，他们返回的是http协议，这就导致了一些问题。

Mixed Content: The page was loaded over HTTPS，blocked the content must be served over HTTPS

这是因为https协议的缘故，出现了请求被拦截；

其实是浏览器不允许在https页面里嵌入http的请求，现在高版本的浏览器为了用户体验，都不会弹窗报错，只会在控制台上打印一条错误信息。

二、解决方法

1. 在主页面的head中加入下面代码（将调用的http请求升级成https请求并调用）

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

2. 后端本地处理一下，将其他服务器的http请求在本地转成https请求再给前端

不过第一个方法会将所有接口都变成https请求，要注意一下这个的风险。

三、调试环境使用 HTTPS

既然有了解决办法，那么就要先在本地调试环境实验一下，需要先将调试环境改成 https 协议

其实在本地配置 HTTPS 非常快捷方便，有现成的成熟工具可以使用。大致分两步：

1. 生成证书。
2. 修改项目的启动服务。

生成证书

我们将使用 mkcert 这个零配置的命令行工具生成证书。

brew install mkcert
brew install nss

其中，nss 是可选的，如果不使用或者不需要测试 Firefox，那么可以不安装 nss。

接着我们创建一个目录来存放证书，比如 ~/.cert：

mkdir -p ~/.cert

自动生成证书：

mkcert -key-file ~/.cert/key.pem -cert-file ~/.cert/cert.pem "localhost"

让系统信任生成的证书：

mkcert -install

因为需要在系统中安装本地 root CA，所以运行上述命令会请求 sudo 权限。只有初次生成证书时需要运行这个命令，后续通过 mkcert -key-file生成的证书会自动被系统信任。

修改项目的启动服务

http-server

纯静态项目可以通过 http-server 进行调试，要切换至 HTTPS 模式，只需加上三个命令行参数：

npx http-server -S -C ~/.cert/cert.pem -K ~/.cert/key.pem

React

通过 Create React App 创建的 React 项目，只需在启动服务时指定几个环境变量就可以切换至 HTTPS 模式：

cd [projectName]
HTTPS=true SSL_CRT_FILE=$HOME/.cert/cert.pem SSL_KEY_FILE=$HOME/.cert/key.pem npm start

其他

有时候可能会遇到无法打开 HTTPS 链接，可能是因为有的https没有经过验证，属于无牌证书，所以遭到了google拒绝。可以经过一些设置，强制chrome使用https的方式打开。可在参考链接中查看相关资料

a

参考链接：
在本地开发调试环境使用 HTTPS
https请求报错block:mixed-content问题的解决办法
Upgrade-Insecure-Requests请求头
设置chrome打开https链接