Mixed Content: The page at ‘https://XXX’ was loaded over a secure connection…

访问 HTTPS 网站，但有时站内下载东西使用的协议却是 HTTP，这其实存在安全隐患，现在 Chrome 不想让这样的事情发生。在谷歌浏览器75的版本还是不会被拦截，但是在测试的87版本谷歌浏览器却被拦截了，相关消息说是85版本之后进行的改造。
ZDNet 报导，谷歌 Chrome 工程师正计划在 HTTPS 网站上默认禁止一些通过 HTTP 下载的行为，当涉及到下载 EXE、DMG（Mac 应用二进制文件）、CRX（Chrome 扩展包） 与诸如 ZIP、GZIP、BZIP、TAR、RAR 和 7Z 等主流压缩/打包文件时，浏览器将阻止下载。
默认阻止下载的这些文件类型被认为是“高风险”的，因为它们最有可能被滥用来隐藏恶意程序。
Emily 表示目前仅考虑阻止在 HTTPS 站点上发起的下载行为，而如果是 HTTP 网站下载这些类型文件，则不加以阻止，因为浏览器本身已经通过 URL 栏对于 HTTP 网站给出了“不安全”的提示。
此外，目前仅考虑将此功能添加到桌面版 Chrome 中，Emily 认为在 Android 上，Chrome 已经可以以类似的方式阻止可疑的 APK 文件，所以暂时问题不大。
解决方法：
1、将资源移到 https 的服务器下
2、设置代理，将http的资源改成https的请求，通过代理实际请求http的返回
3、添加如下页面元信息：

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

会将所有的http请求改为https请求，浏览器不会报错，但是前提还得是 https 下有对应资源或者 设置好代理了，否则请求资源将会加载失败
4、也可以换成打开新窗口 window.open() 来请求资源路径来下载资源，不过第一次请求需设置浏览器允许当前页面打开 http 路径的新窗口

用 axios 发送请求下载文件请求后端会出现以下问题，返回的是二进制流格式，如图所示：

比较纳闷，后来网上查了各种资料才知道，前端需要 blob 就可以将二进制流文件下载到本地了。

实现思路

1. 在页面新建 a 标签 或者按钮点击事件；
2. 创建 Blob 对象，在 Blob 中传入后端返回的 response.data，这一步中 Blob 需要的是一个数组类型的参数, 后端二进制流这边接收到的 response.data 使用查看发现是String, 所以我把 response.data 放进一个长度1的数组, 再传入 Blob 对象，此外需要规定文件类型， 可以是 doc 的application/vnd.openxmlformats-officedocument.wordprocessingml.document, 也可以是二进制流的application/actet-stream，但是我在项目中并没有指定，也是可以的。
3. 获取下载文件名字，并使用 decodeURI() 函数进行解析；
4. 创建下载链接 window.URL.createObjectURL()；
5. 把步骤四创建的链接变量赋值给 a 标签的 href 属性；
6. 使用 document.body.appendChild() 方法把 a 标签挂上去，再调用 a 标签的 .click() 事件；
7. document.body.removeChild() 移除 a 标签；
8. window.URL.revokeObjectURL() 释放 blob 对象。

备注

上面步骤三的操作，从响应头里 content-disposition 属性可以获取到文件名，下面代码也给出了解决方案，当然前提是后端接口是要设置这个属性的。

代码

axios({
  method: 'post',
  data: parameter,
  url: `/download`,
  headers: {
    'Content-Type': 'application/json',
  },
  responseType: 'blob'
}).then(res => {
  let blob = new Blob([res.data])
  let contentDisposition = res.headers['content-disposition']
  let pattern = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  let result = pattern.exec(contentDisposition)
  // 使用decodeURI对名字进行解码
  let fileName = decodeURI(result[1])
  let downloadElement = document.createElement('a')
  // 创建下载的链接
  let href = window.URL.createObjectURL(blob)
  downloadElement.style.display = 'none'
  downloadElement.href = href
  // 下载后文件名
  downloadElement.download = fileName
  document.body.appendChild(downloadElement)
  // 点击下载
  downloadElement.click()
  // 下载完成移除元素
  document.body.removeChild(downloadElement)
  // 释放掉blob对象
  window.URL.revokeObjectURL(href)
  }).catch(err => {
    console.log('下载失败')
})

参考文章

https://blog.csdn.net/kebi99/article/details/109806643

一、基础知识

1、OSI七层模型：

参考：OSI七层模型详解_小鹏_加油的博客-CSDN博客_osi七层模型

这个博主说的很详细，感兴趣的可以去学习一下。如果不感兴趣的话记住tcp/ip协议是在传输层就好了。

物理层、数据链路层、网络层、传输层、会话层、表示层、应用层

2、tcp/ip协议：

        三次握手  

        这个需要了解并记住，面试会问   

        四次挥手

二、http请求

1、概念

        超文本传输协议，用户从万维网络服务器传输超文本到本地浏览器的传送协议。

        http协议是基于tcp的应用层协议，它不关心数据传输的细节，主要是用来规定客户端和服务端的数据传输格式，最初是用来向客户端传输html页面内容，默认端口是80.

        http是基于请求与响应模式的、无状态应用程的协议。

2、请求方式

        get请求：从服务器获取数据

        post：提交数据 put(全部修改)/patch(局部修改)：修改数据

        delete:删除数据

        head:查看响应头

        options:查看支持的请求方式

        trace:查询自己的请求数据（用来测试的）

        connect：预留的，目前没有什么用

2、请求头字段含义

        2.1Host：openapiv52.ketangpai.com：请求发送服务器的域名地址。

        2.2、Connection: keep-alive：事务完成后是否关闭连接，keep-alive 保持连接，close 是关闭连接。

        2.3、Content-Length: 133：请正文内容长度。

        2.4、sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="99", "Google Chrome";v="99"：安全相关，代替 user-agent 的功能，目的是防止 user-agent 信息泄露。

        2.5、Accept: application/json, text/plain, /：浏览器能处理的类容类型，服务器会选一种类型，通过响应头信息的 Content-Type 字段告诉浏览器，服务器选的是哪种类型。

        2.6、Content-Type: application/json：请求正文的编码格式

        2.7、sec-ch-ua-mobile: ?0：安全相关， 是否是移动设备

        2.8、User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36：用户代理信息，告诉服务器是谁在发请求。         2.9、sec-ch-ua-platform: "Windows"：用户代理站点

        2.10、Origin: https://www.ketangpai.com：请求站点的服务器名称

        2.11、Sec-Fetch-Site: same-site：安全相关，获取数据站点规则

        2.12、Sec-Fetch-Mode: CORS：安全相关，获取数据方式

        2.13、Sec-Fetch-Dest: empty：安全相关，如何使用获取的数据

        2.14、Referer: https://www.ketangpai.com/：请求页面的地址

        2.15、Accept-Encoding: gzip, deflate, br：浏览器支持的编码格式，一般是压缩算法

        2.16、Accept-Language: zh-CN,zh;q=0.9：浏览器可以处理的语言，这里是中文

3、响应状态码

        3.1、1xx：服务器已经收到了请求，需要客户端继续操作

                1、100：客户端应该继续请求

                2、101：切换到更高级的协议

        3.2、2xx：HTTP成功状态码

                1、200：请求成功，一般用于get，和post

                2、201: 请求已经成功，并创建了新的资源        

                3、202：请求已经接受，但未处理完成

                4、204：服务器处理成功，但是并未返回内容

                5、206：服务器成功处理了部分请求，get请求，常用与资源下载

        3.3、3xx：资源重定向

                1、301：请求资源被永久移动到新的url，返回替代该资源的url，浏览器会自动重定向到新的url，后续资源的访问将使用新的替代

                2、302：临时移除，301是永久移除，资源只是临时移动到新的url，客户端继续使用原有的url         

                3、303：查看该资源的其他地址

                4、304：请求的资源未修改，当服务器返回304，此时服务器不会返回任何资源，客户端将使用本地缓存资源。

                5、305：请求的资源必须通过代理访问

                6、307：临时重定向，与302类似

        3.4、4xx：客户端错误

                1、401：请求需要用户的身份认证

                2、402：保留状态码，并未使用

                3、403：服务器已经收到了客户端的请求，但是拒绝执行这个请求

                4、404：服务器无法找到客户端需要访问的资源

                5、407：请求需要代理进行身份认证，与401类似

                6、408：服务器等待客户端发送的请求时间过长，超时

        3.5、5xx：服务端错误

                1、500：服务器内部错误，无法完成请求

                2、501：服务器不支持请求的功能，无法完成请求

                3、502：网关或者是代理服务器执行请求的时候，收到了一个无效的响应

                4、503：服务器故障，暂时无法处理客户端的请求

                5、504：网关或者是服务器代理，无法从远处服务器获取请求

                6、505：服务器不支持请求的HTTP协议的版本，无法处理请求

三、https

1、概念

        可以理解为HTTP+SSL/TLS。即 HTTP加入SSL层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL，用于安全的 HTTP 数据传输。

       CA(Certificate Authority)证书授权中心：CA 证书授权中心，作为电子商务交易中受信任的第三方， 承担公钥体系中公钥的合法性检验的责任，CA 中心会给每个使用公开密钥的用户发放一个数字证书， 数字证书的作用是证明证书中列出的用户合法拥有证书中列出的公开密钥， CA 机构的数字签名使得攻击者不能伪造和篡改证书。

2、https的请求过程

        

        1、客户端像服务端发起https请求

        2、服务端向CA机构获取CA证书（公钥A、私钥B）

        3、服务端将CA证书(公钥A)返回给客户端

        4、客户端预先放了一个CA证书，客户端获取到服务端返回的CA证书、校验证书是否合法

        5、CA证书校验通过后，客户端将公钥A取出来，随机生成一个key

        6、客户端通过公钥A对随机生成的key进行加密(非对称加密)，并发送给服务端

        7、服务端使用私钥B对key进行解密，得到客户端随机生成的key

        8、服务端使用获取的key对要传输的数据进行加密(对称加密)，并传给客户端

        9、客户端收到加密数据以后，使用key对数据进行解密。

        10、客户端和服务端一直会通过Key来进行加密传输

四、http与https的区别

        1、https传输加密，默认是443端口

        2、https需要CA证书，比较安全

        3、http明文传输，默认是80端口

        4、http是无状态的、简单的协议

        5、https是有状态的，需要验证身份

五、Content-Type

1、概念

        请求头Content-Type: 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析

2、常见的编码

        1、application/x-www-form-urlencoded

         浏览器的原生 form 表单，会以 application/x-www-form-urlencoded 方式提交数据。

        2、multipart/form-data

         这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持。

        3、application/json

        用来告诉服务端消息主体是序列化后的 JSON 字符串

        4、text/xml

        它是一种使用 HTTP 作为传输协议，XML作为编码方式的远程调用规范

        5、text/plain

        是无格式正文，数据以纯文本存在，包括( text/html,text/json,text/xml )格式进行编码，其中不含任何控件或格式字符