域名

腾讯云

在腾讯云买服务器就到腾讯云买域名，之后好备案，备案完毕
免费领取 CDN 流量包，再 CDN 控制台配置开启 https 服务

4.点击图片中的 https配置中的更新，去提示弹窗中的引导里面申请免费一年的诚信通 ssl 证书，等审核下来之后，再回来这个页面，点击更新，选择腾讯云托管证书就可以了，页面就是 https 访问的了。

CDN 厂商

注意，如果是上传图片，或者视频，生成的是 http 链接，要转成 https 才行，这时候需要域名

腾讯云

使用腾讯云服务器的可以直接使用腾讯云的 CDN 服务，每月免费 10g 流量，需要买个域名，便宜的要死。

七牛云

七牛云推荐，这个很方便

1. 新增一个云存储

2. 新建空间

随便写一个你自己的名字，然后会生成一个空间，然后就可以点文件上传，生成外链，就有一个测试域名了

3. 绑定域名

. 添加一个前缀，例：cdn.你的域名 之后进行 CNAME 解析到也可以

又拍云

又拍云：都可以

http 和 https 冲突

http 自动升级 https

方法1：服务端设置header

好在 W3C 工作组考虑到了我们升级 HTTPS 的艰难，在 2015 年 4 月份就出了一个 Upgrade Insecure Requests 的草案，他的作用就是让浏览器自动升级请求。在我们服务器的响应头中加入：（当然如果操作不了服务器，下面还会介绍另一种解决办法）。

header("Content-Security-Policy: upgrade-insecure-requests");

复制

方法2：页面设置meta头

在页面中加入 meta 头：（我使用这个方法）

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

复制

如果页面比较多，需要统一改变的话，我们可以将这条语句添加到全局JS文件里，全局调用。

方法三：删除链接中的http:

推荐方法，不指定具体协议，使用资源协议自适配，比如，当前为https页面，那么就是https资源，如果是http页面，那么就是http资源。具体方法超简单：

<script src='//cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>

复制

方式四：

最笨的方法，直接复制原有代码，写成两套代码，一套为http使用，一套为https使用，http和https各自指向各自服务。

https 中能够访问 http 资源

Https网站中请求Http内容- 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，请求的一个接口部署的服务器为http环境。

分析

如果一个https网站中的某个页面内容如下，这个页面部署在配置了https的服务器中，但是页面加载时请求了有js、css、图片和接口四个http协议的资源：http://cdn.staticfile.org/animate.css/4.1.0/animate.compat.css、http://cdn.staticfile.org/react/16.13.1/cjs/react.development.js、http://ww4.sinaimg.cn/bmiddle/6910ab7bgw1egloghsfi3j20b40b40t6.jpg、http://getjson.cn/api/get/nkK3HHTUieWI25fA

<html>
<head>
    <meta charset="UTF-8">
    <title>https-http</title>
    <link href="http://cdn.staticfile.org/animate.css/4.1.0/animate.compat.css" type="text/css" >
    <script src="http://cdn.staticfile.org/react/16.13.1/cjs/react.development.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<img src="http://ww4.sinaimg.cn/bmiddle/6910ab7bgw1egloghsfi3j20b40b40t6.jpg"/>
<script type="text/javascript">
    const url = "http://getjson.cn/api/get/nkK3HHTUieWI25fA";
    $(document).ready(function () {
        $(document.body).attr('style', 'cursor:pointer;');
        $.ajax({
            url: url,
            async: true,
            success: function (result) {
                try {
                    var jsonResult = JSON.stringify(result);
                    console.log(jsonResult);
                } catch (err) {
                    console.log(err);
                }
            }
        });
    });
</script>
</body>
</html>

复制

访问后，控制台报错：Mixed Content: The page at ‘https://*****’ was loaded over HTTPS, but requested an insecure ****. This request has been blocked; the content must be served over HTTPS。加载的js和请求的接口被拒绝了，图片可以加载出来，但是也有警告⚠️。

https地址中，如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止。

解决方法

以下情况假设不存在跨域问题

1、如果在https网站中请求的http资源本身就支持https，可以在html页面加入<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">，浏览器在解析请求的时候会自动把http请求转化为https请求。

2、如果如果在https网站中请求的http资源本身不支持https，可以把https网站换成http协议。（当我没说?）

3、如果如果在https网站中请求的http资源本身不支持https，但是请求的http资源在属于自己的服务上（非第三方服务），并且不考虑改为https协议带来的性能问题，可以把要请求的http资源协议改为https。

4、如果在https网站中请求的http资源本身不支持https，并且这些被请求的http资源都是静态资源（比如js、css等），可以考虑把这些资源下载下来放到现有的https服务器中，也可以寻找https协议的资源，很多免费的cdn服务都同时提供了https和http协议的静态资源。

5、如果在https网站中请求的http资源是动态资源（比如请求http接口），且是第三方接口（自己无法变更这个第三方接口是http协议的事实），可以用nginx代理的方式。

以上面分析的html为例，在https网站中请求了一个http协议的第三方接口，可以通过让配置了https的nginx代理那个http接口，然后让前端访问接口的时候先访问nginx，nginx再访问第三方http服务。的搞一台配置了https的nginx（如果没有的话），添加proxy_pass配置：

server {
        location jsonapi/ {
            proxy_pass http://getjson.cn/api/;
        }
}

然后前端发起请求的地址，改成nginx代理的地址

<script type="text/javascript">
    const url = "nginx的地址/jsonapi/get/nkK3HHTUieWI25fA";
    $(document).ready(function () {
        $(document.body).attr('style', 'cursor:pointer;');
        $.ajax({
            url: url,
            async: true,
            success: function (result) {
                try {
                    var jsonResult = JSON.stringify(result);
                    console.log(jsonResult);
                } catch (err) {
                    console.log(err);
                }
            }
        });
    });
</script>

当然网页中静态的http资源也可以由nginx来代理：

server {
        location /httpresource {
            proxy_pass http://cdn.staticfile.org/;
        }
}

然后前端请求静态资源的地址，改成nginx代理的地址

<head>
    <meta charset="UTF-8">
    <title>https-http</title>
    <link href="nginx的地址/httpresource/animate.css/4.1.0/animate.compat.css" type="text/css" >
    <script src="nginx的地址/httpresource/react/16.13.1/cjs/react.development.js"></script>
</head>

Next.js 学习笔记（四）- 域名、CDN、http 和 https 冲突

域名

腾讯云

阿里云