102 lines
3.1 KiB
Markdown
102 lines
3.1 KiB
Markdown
# 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年
|