Shiro项目Docker部署前端访问异常问题分析与解决方案

问题现象

在Shiro项目的实际部署过程中，发现当使用Docker容器化部署前端服务时，浏览器访问会出现异常报错，但有趣的是，将报错信息中的链接手动复制到浏览器地址栏却可以正常访问。与此同时，使用Vercel平台部署的同一套前端代码却能完全正常工作，且两者连接的后端服务完全一致。

技术背景

Shiro是一个基于现代Web技术栈的开源项目，采用前后端分离架构。前端通常部署在静态资源服务器或Serverless平台（如Vercel），后端则运行在容器化环境中。这种架构下，跨域访问和HTTPS安全策略是需要重点关注的配置项。

问题分析

1. 现象对比分析：

   • Docker部署前端：出现API调用失败，但接口实际可用
   • Vercel部署前端：所有功能正常
   • 共用同一后端服务

2. 关键差异点：

   • 部署环境不同（容器化 vs Serverless）
   • 网络访问方式差异
   • HTTPS证书配置

3. 根本原因： 经过排查，发现问题出在混合内容（Mixed Content）安全策略上。虽然后端服务已配置HTTPS，但前端在Docker环境中运行时，可能存在以下情况：

   • 前端页面以HTTP协议加载
   • 前端代码中发起的API请求使用HTTPS
   • 浏览器安全策略阻止了混合内容请求

解决方案

方案一：统一协议方案

1. 确保前端访问地址使用HTTPS
2. 检查Nginx/反向代理配置，强制所有流量使用HTTPS
3. 在后端CORS配置中明确指定允许的HTTPS源

方案二：前端配置调整

1. 检查前端环境变量配置，确保API_BASE_URL使用正确的HTTPS地址
2. 如果是Vue/React项目，检查axios的baseURL配置
3. 验证前端Docker容器的端口映射是否正确

方案三：后端安全策略调整

1. 检查Shiro后端的application.yml配置：

   shiro:
     cors:
       allowed-origins: https://your-frontend-domain
   

2. 确保Spring Security配置正确处理HTTPS请求头

最佳实践建议

1. 生产环境部署：

   • 始终使用HTTPS协议
   • 配置HTTP到HTTPS的自动重定向
   • 使用有效的SSL证书（推荐Let's Encrypt）

2. 开发环境调试：

   • 可以使用secure: false配置绕过浏览器安全限制（仅限开发）
   • 配置本地hosts文件模拟生产环境域名

3. 容器化部署：

   • 使用Nginx作为前端反向代理
   • 配置正确的HTTP头：

     add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
     

总结