解决Mixed Content: The page at https://* was loaded over HTTPS, but requested an insecure XMLHttpReque

目录

项目场景

问题描述

原因分析

解决方案

一些问题

---

项目场景

https协议的网站下请求http的资源

---

问题描述

https协议的网站请求http协议的资源被浏览器任务不安全，请求被拦截并且报了以下错误：

原文： 

Mixed Content: The page at https://* was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint http://*. This request has been blocked; the content must be served over HTTPS

译文：

混合内容:https://*上的页面是通过HTTPS加载的，但是请求了一个不安全的XMLHttpRequest端点http://*.此请求已被阻止;内容必须通过HTTPS提供

---

原因分析

发生该错误的原因由浏览器的安全机制引起的，一个最好的解决办法就是都是用http的请求，也免去了申请证书，但浏览器一直报不安全的话可能会散失一些用户。所以还是得安排上https协议，如果要请求的资源服务器支持https协议，我们只需要把请求的http改成https即可；如果不支持的话可以选择给资源服务器安排上ssl证书，但很多时候我们没办法自行更改资源服务器，下面给大家提供我个人解决该问题的方案！

---

解决方案

我使用的是Nginx服务，因此我可以利用Nginx的反向代理来解决该问题，配置如下：

将以下配置放置在http{}内

server {
    listen       443 ssl;
    # 你的域名
    server_name  xxxx.com;

    # 你的证书 crt对应的是公钥 key对应的是私钥
    ssl_certificate      xxxxx.crt;
    ssl_certificate_key  xxxxx.key;

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;

    # 访问根路径跳转页面
    # 如：https://xxxx.com/
    location / {
        root   html;
        index  index.html index.htm;
    }

    # 访问/api的时候代理到服务器端部署的后端服务
    # 如：https://xxxx.com/api
    location /api {
        proxy_pass http://127.0.0.1:8080;
    }
    
}

注意看配置中说明的注释，如果有疑问或者不对的地方请在评论区发言！！！

一些问题

无法通过https协议访问 / 无法通过域名访问

1. 先确定一下域名是否正确的指向服务器端的公网IP地址

2. 其次保证Nginx配置文件中的域名是否和你的域名一致

3. 服务器端防火墙是否开放了443端口号

4. 可能是Nginx安装的时候没有配置with-http_ssl_moudle模块

提示您的连接不是私密连接 

关于这个问题给出下面几个解决方式：

1. 清除DNS缓存

2. 保证客户端服务端的时间一致

3.  尝试更换证书（我更换了证书就解决了）

# 原先我用的是cloudflare上面申请的证书，后面我使用dnspod的证书就好了（一年免费）

crt和key这两个文件怎么生成？ 

 在你申请了证书之后会给你提供公钥和私钥两个部分的内容，把公钥的内容复制粘贴到记事本上，后缀改为.crt就行；私钥部分也复制粘贴到另一个记事本上把后缀改成.key就行。