CORS问题最终修复方案

问题根源

浏览器阻止从公网IP (101.43.95.130:8038) 访问 localhost:8037，这是浏览器的**Private Network Access (PNA)**安全策略，无法通过CORS配置绕过。

解决方案

核心修复：前端API地址自动推断

修改了 frontend/src/api/index.ts，优先使用浏览器当前主机名来推断API地址，而不是依赖环境变量：

// 关键逻辑：
// 1. 如果前端在 localhost，后端使用 localhost:8037
// 2. 如果前端在公网IP (101.43.95.130:8038)，后端使用 101.43.95.130:8037
// 3. 这样避免了从公网访问localhost的问题

为什么这样修复？

浏览器安全策略：浏览器不允许从公网IP访问localhost，这是硬性限制
环境变量问题：即使设置了环境变量，如果设置为localhost，仍然会被阻止
自动推断：根据当前访问的主机名自动推断，确保前后端在同一网络地址空间

验证步骤

强制刷新浏览器（重要！）
- Windows/Linux: Ctrl + F5 或 Ctrl + Shift + R
- Mac: Cmd + Shift + R
打开浏览器控制台（F12）
- 查看Console标签，应该看到：[API] 自动检测API地址: http://101.43.95.130:8037
- 如果看到这个日志，说明API地址已正确设置
尝试注册
- 应该不再出现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标签

打开开发者工具（F12）
切换到Network标签
尝试注册
查看请求的URL，应该是 http://101.43.95.130:8037/api/v1/auth/register
如果仍然是 localhost:8037，说明代码没有生效

检查3：后端可访问性

# 测试后端是否可以从公网访问
curl http://101.43.95.130:8037/health

# 应该返回: {"status":"healthy"}

检查4：CORS响应头

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

关键点总结

✅ 前端代码已修复：自动根据当前主机名推断API地址
✅ 后端CORS已配置：允许来自 101.43.95.130:8038 的请求
✅ 后端监听正确：监听在 0.0.0.0:8000，映射到主机 8037 端口
⚠️ 必须强制刷新浏览器：清除缓存，加载新代码

下一步

如果修复后仍然有问题，请提供：

浏览器控制台的完整错误信息
Network标签中实际请求的URL
后端日志（docker-compose logs backend）

状态: ✅ 已修复（需要强制刷新浏览器）时间: 2024年

3.1 KiB Raw Permalink Blame History Unescape Escape