前端外包团队-郑州前端开发外包公司

chrome 浏览器对 http 协议的限制很多，所以运维在部署网站的时候大概率是需要申请 https 协议的。

账号密码不能自动填充是因为 chrome 记住密码功能记住的网站是包含域名、协议和端口的，其中一个变化了都不能自动填充。

注意：

项目部署后同时给域名申请 https 安全协议运维需要关注 https 自动续费，以免影响线上环境案例 3 - webpack-dev-server 代理的后端服务 忽然报 CORS 错误 - 强制使用 https 问题

看控制台报错，意思是后端服务自动跳转到另一个服务了，而那个服务未开启 cors 策略。遇到这个问题的时候我很迷惑，跳转的这个域名也是非常规的域名，以为是后端某位同学的服务注册到线上了，但是经过观察，发现线上环境没有影响，只有本地开发环境的请求会报错。

如果是后端本地服务注册到线上，那么线上和本地都应该是随机访问到这个同学的服务而报错。

最后想到本地和线上的不同，就是一个是 http，一个是 https，在浏览器直接访问后端的服务发现，后端服务开启了 http 自动升级 https，因此所有 http 协议的请求都不能通过了。

查看后端服务的 nginx 配置前端外包团队，可以看到所有请求都配置了 301 重定向。

修改本地使用的后端服务协议为 https 解决此问题。

总结

总的来说，一个前端将会遇到的 https 问题大概有以下 3 种：

Mixed Content 错误：

当网站同时使用 HTTPS 和 HTTP 的资源时，例如在 HTTPS 的网站中引入 HTTP 的图片、CSS、JavaScript 等文件，浏览器会提示“Mixed Content”错误，这是因为 HTTP 的资源容易被恶意攻击者利用。解决方法是将所有资源都使用 HTTPS 进行加载。

证书错误：

在使用 HTTPS 时，需要使用 SSL 证书来验证网站的身份。如果证书无效、已过期或不受信任前端外包团队，浏览器会提示证书错误。解决方法是获取有效的 SSL 证书，并将其安装到 Web 服务器中。

HSTS：

HSTS（HTTP Strict Transport Security）是一种安全机制，可以强制浏览器只使用 HTTPS 连接访问网站。如果网站启用了 HSTS，浏览器会自动将 HTTP 请求重定向到 HTTPS。在开发过程中，需要注意是否启用了 HSTS，以避免由于 HSTS 导致的连接问题。

tips最后

欢迎大家讨论、指正！

关注小姐姐，一起学一学！

往期精彩

前端请装上这个 Chrome 插件

Vue2 到 React 一遍过

值得一看的小程序开发经验

嵌入的 iframe 又不能访问了？还有这些你不知道的事

package-lock.json 需要提交到 git ？

本文正在参加「金石计划」