解决https页面请求http出现Mixed Content.This request has been blocked； the content must be served over HTTPS.

场景

在react的前端进行html嵌入，嵌入的地址时https的，通过https前端访问的时候正常，当点击嵌入网页的超链接，就出现错误：Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure resource '<URL>'. This request has been blocked; the content must be served over HTTPS.

原因

当用户访问通过HTTPS提供的页面时，他们与 Web 服务器的连接使用TLS 进行加密，因此可以防止大多数嗅探器和中间人攻击。包含使用明文 HTTP 获取的内容的 HTTPS 页面称为混合内容页面。像这样的页面只是部分加密，使嗅探器和中间人攻击者可以访问未加密的内容。这使页面不安全。

问题排查

1、内嵌的地址是https，没有问题

2、src访问的url通过http和https可以正常访问，确认了nginx配置准确
http或者https直接访问这个地址没有问题，跳转正常

解决办法一

点击浏览器地址栏小锁图标，选择网站设置
edge

chrome

找到不安全内容 选择允许

解决办法二

在html页面头部添加以下meta信息

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

这个meta是用于定义浏览器在本页面中的内容安全策略（CSP），值upgrade-insecure-requests的作用表示对页面中资源请求自动升级为https。比较适合页面中有太多资源的url是http协议。

注意：如果本身js/css等资源不支持https，添加该项meta并不会生效。

解决办法三

在nginx的配置中添加响应头，意味着对于所有通过端口（HTTP）访问的请求，Nginx都会添加一个Content-Security-Policy响应头部，指示浏览器将所有HTTP请求升级为HTTPS请求

add_header Content-Security-Policy "upgrade-insecure-requests" always;

解决办法四

修改超链接的方式，比如

<a href="/hahaha">点我跳转到hahaha</a>

修改为

<a href="hahaha/index.html">点我跳转到hahaha</a>

这样在访问跳转时，不会出现301重定向，其实就是建议使用相对路径，取决于目标是目录还是文件，最主要的是取决于具体需求