# CORS问题最终修复方案 ## 问题根源 浏览器阻止从公网IP (`101.43.95.130:8038`) 访问 `localhost:8037`,这是浏览器的**Private Network Access (PNA)**安全策略,无法通过CORS配置绕过。 ## 解决方案 ### 核心修复:前端API地址自动推断 修改了 `frontend/src/api/index.ts`,**优先使用浏览器当前主机名**来推断API地址,而不是依赖环境变量: ```typescript // 关键逻辑: // 1. 如果前端在 localhost,后端使用 localhost:8037 // 2. 如果前端在公网IP (101.43.95.130:8038),后端使用 101.43.95.130:8037 // 3. 这样避免了从公网访问localhost的问题 ``` ### 为什么这样修复? 1. **浏览器安全策略**:浏览器不允许从公网IP访问localhost,这是硬性限制 2. **环境变量问题**:即使设置了环境变量,如果设置为localhost,仍然会被阻止 3. **自动推断**:根据当前访问的主机名自动推断,确保前后端在同一网络地址空间 ## 验证步骤 1. **强制刷新浏览器**(重要!) - Windows/Linux: `Ctrl + F5` 或 `Ctrl + Shift + R` - Mac: `Cmd + Shift + R` 2. **打开浏览器控制台**(F12) - 查看Console标签,应该看到:`[API] 自动检测API地址: http://101.43.95.130:8037` - 如果看到这个日志,说明API地址已正确设置 3. **尝试注册** - 应该不再出现CORS错误 - 请求应该发送到 `http://101.43.95.130:8037/api/v1/auth/register` ## 如果仍有问题 ### 检查1:查看浏览器控制台日志 打开控制台,应该看到: ``` [API] 自动检测API地址: http://101.43.95.130:8037 (当前主机: 101.43.95.130) ``` 如果没有看到,说明代码没有正确加载,需要: - 清除浏览器缓存 - 强制刷新页面 ### 检查2:查看Network标签 1. 打开开发者工具(F12) 2. 切换到Network标签 3. 尝试注册 4. 查看请求的URL,应该是 `http://101.43.95.130:8037/api/v1/auth/register` 5. 如果仍然是 `localhost:8037`,说明代码没有生效 ### 检查3:后端可访问性 ```bash # 测试后端是否可以从公网访问 curl http://101.43.95.130:8037/health # 应该返回: {"status":"healthy"} ``` ### 检查4:CORS响应头 ```bash curl -X OPTIONS http://101.43.95.130:8037/api/v1/auth/register \ -H "Origin: http://101.43.95.130:8038" \ -H "Access-Control-Request-Method: POST" \ -v 2>&1 | grep -i "access-control" ``` 应该看到: ``` < Access-Control-Allow-Origin: http://101.43.95.130:8038 ``` ## 关键点总结 1. ✅ **前端代码已修复**:自动根据当前主机名推断API地址 2. ✅ **后端CORS已配置**:允许来自 `101.43.95.130:8038` 的请求 3. ✅ **后端监听正确**:监听在 `0.0.0.0:8000`,映射到主机 `8037` 端口 4. ⚠️ **必须强制刷新浏览器**:清除缓存,加载新代码 ## 下一步 如果修复后仍然有问题,请提供: 1. 浏览器控制台的完整错误信息 2. Network标签中实际请求的URL 3. 后端日志(`docker-compose logs backend`) --- **状态**: ✅ 已修复(需要强制刷新浏览器) **时间**: 2024年