在Kubernetes本地集群部署React+FastAPI时的前后端路由问题

问题根源 #

1. React Proxy仅适用于开发环境：package.json中的proxy配置是给本地开发服务器（react-scripts start）用的，生产构建后的前端运行在浏览器中，不会通过这个proxy转发请求，浏览器会直接发起请求到配置的地址。
2. localhost的误解：容器内的localhost指向容器自身，前端容器中请求localhost:8000是访问前端容器自己，而非后端服务。
3. YAML语法错误：你的Deployment和Service配置中存在多处语法错误（比如metadata.name和spec字段连写），会导致K8s无法正确解析资源配置。
4. CORS配置不匹配：FastAPI的CORS仅允许localhost:3000，但部署后前端的外部访问地址是http://192.168.49.2:30000，导致跨域请求被拦截。

解决步骤 #

1. 修复K8s YAML配置的语法错误 #

所有资源的metadata.name和spec字段必须分开，以下是修正后的关键片段：

后端Deployment/Service修正示例

apiVersion: apps/v1
kind: Deployment
metadata:
  name: smashac-backend
  labels:
    app: smashac-backend  # 修正连写错误
spec:  # 单独成行
  replicas: 3
  selector:
    matchLabels:
      app: smashac-backend
  template:
    metadata:
      labels:
        app: smashac-backend
    spec:
      containers:
        - name: smashac-backend
          image: jhudson1998/smashac-backend:latest
          ports:
            - containerPort: 8000
---
apiVersion: v1
kind: Service
metadata:
  name: smashac-backend  # 修正连写错误
spec:  # 单独成行
  selector:
    app: smashac-backend
  type: LoadBalancer
  ports:
    - protocol: TCP
      port: 8000
      targetPort: 8000
      nodePort: 30001
  externalIPs:
    - 192.168.49.2

前端Deployment/Service修正示例

apiVersion: apps/v1
kind: Deployment
metadata:
  name: smashac-frontend  # 修正连写错误
spec:  # 单独成行
  selector:
    matchLabels:
      app: smashac-frontend
  replicas: 3
  template:
    metadata:
      labels:
        app: smashac-frontend
    spec:
      containers:
        - name: smashac-frontend
          image: "jhudson1998/smashac-frontend:latest"
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: smashac-frontend  # 修正连写错误
spec:  # 单独成行
  selector:
    app: smashac-frontend
  type: LoadBalancer
  ports:
    - protocol: TCP
      port: 3000
      targetPort: 3000
      nodePort: 30000
  externalIPs:
    - 192.168.49.2

2. 调整前端API请求地址 #

在React代码中，将所有API请求的目标地址改为K8s后端Service的DNS名称：

• 同命名空间下，直接使用http://smashac-backend:8000（K8s会自动解析Service的DNS记录）
• 若跨命名空间，使用http://smashac-backend.<你的命名空间>.svc.cluster.local:8000

同时移除package.json中的proxy配置，因为生产环境不生效。

3. 更新FastAPI的CORS配置 #

修改后端的CORS允许列表，加入前端的外部访问地址：

origins = [
    "http://localhost:3000",
    "http://192.168.49.2:30000"  # 前端的外部访问地址
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

生产环境建议避免使用"*"，严格限制允许的域名；也可以通过环境变量动态传递允许的origin，避免硬编码。

4. 重新构建镜像并部署 #

• 前端修改后重新构建镜像并推送：docker build -t jhudson1998/smashac-frontend:latest . && docker push jhudson1998/smashac-frontend:latest
• 后端修改CORS后重新构建推送：docker build -t jhudson1998/smashac-backend:latest . && docker push jhudson1998/smashac-backend:latest
• 重新部署K8s资源：kubectl apply -f <后端YAML文件> && kubectl apply -f <前端YAML文件>

5. 验证 #

访问前端地址http://192.168.49.2:30000，打开浏览器控制台查看请求状态，确认API请求是否成功，500错误是否消失。

内容的提问来源于stack exchange，提问作者jhudson1998