MixContent

问题发生场景

在本地测试前后端项目的时候一切正常。当我将前端项目和后端项目打包并部署到服务器后，前端项目无法正常访问后端接口。浏览器控制台报错为“已阻止混合内容”，即mix content。

经过百度得知，mix content 常在 https 页面访问 http 接口时发生。

由于我的服务器上的tomcat之前就已经配置过SSL证书，所以部署在那个 tomcat 中的项目资源都会以https的方式访问。但是我这个后端项目是spring boot项目，使用的是内置的tomcat，所以直接部署后启动的是 http 服务。我 https 的页面访问了我 http 的接口，就产生了错误。

解决方案

  1. 去除服务器上 tomcat 的SSL配置。（不合适）
  2. 为后端spring boot项目配置SSL证书。（目前适用于我）

方案实施

  1. 下载自己的SSL证书，将 jks 后缀的文件放在项目的 resource 目录下。
  2. 完善项目的配置文件，我这里用的是 yml 配置文件。
1
2
3
4
5
6
server:
  port: xxxxx
  ssl:
    key-store: classpath:www.kahvia.cn.jks
    key-store-type: JKS #证书文件类型
    key-store-password: xxxxxxxx #证书下载时包含的密码

补充

  • Mix Content 的错误不会在 http 页面请求 https 接口的时候发生。也就是说，当我为spring boot配置SSL证书后，本地项目仍然可以正常访问已经部署的后端项目。