新手开发者：前后端分离部署及其跨域解决方案

新手开发者：前后端分离部署及其跨域解决方案

典型生产部署场景

访问

加载前端应用

执行前端代码

跨域请求

用户

前端服务器 www.frontend.com

请求后端API www.backend.com

场景描述：

• 前端：部署在 GitHub Pages (www.frontend.com)
• 后端：部署在阿里云服务器 (www.backend.com)
• 用户：访问 www.frontend.com

跨域问题如何解决？

方案一：CORS（推荐方案）

这是最直接的解决方案，不需要Nginx代理，只需后端配置：

1. 后端配置CORS响应头：

   // Node.js/Express示例
   const express = require('express');
   const cors = require('cors');
   
   const app = express();
   
   // 允许来自前端域名的跨域请求
   app.use(cors({
     origin: 'https://www.frontend.com',
     methods: ['GET', 'POST', 'PUT', 'DELETE'],
     allowedHeaders: ['Content-Type', 'Authorization']
   }));
   

2. 前端直接调用后端API：

   // 前端代码
   fetch('https://www.backend.com/api/data')
     .then(response => response.json())
     .then(data => console.log(data));
   

方案二：Nginx反向代理

当CORS不可用或不方便修改后端代码时使用：

1. 访问

2. 加载前端应用

3. 请求前端域名API

4. 转发请求

5. 返回数据

6. 返回数据

用户

前端服务器 www.frontend.com

Nginx代理 www.frontend.com/api

后端服务器 www.backend.com

️ Nginx代理具体配置

部署位置：

Nginx需要部署在前端服务器上（本例中是GitHub Pages。GitHub Pages不支持自定义Nginx）

⚠️ 重要问题：GitHub Pages是静态托管服务，不支持运行Nginx！这就是为什么在实际生产中：

更现实的部署方案：

1. 前端部署在支持Nginx的服务器：

   • 购买阿里云/腾讯云服务器
   • 部署Nginx + 前端文件

2. Nginx配置：

   server {
       listen 80;
       server_name www.frontend.com; # 你的前端域名
       
       # 服务前端静态文件
       location / {
           root /var/www/frontend;
           index index.html;
           try_files $uri $uri/ /index.html;
       }
       
       # 代理API请求
       location /api/ {
           # 添加CORS头（可选）
           add_header 'Access-Control-Allow-Origin' 'https://www.frontend.com';
           add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
           
           # 转发到真实后端
           proxy_pass https://www.backend.com/;
           
           # 修改请求头
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }
   }
   

前端代码调用：

// 前端调用同源API
fetch('/api/data') 
  // 实际发送到：https://www.frontend.com/api/data
  // Nginx转发到：https://www.backend.com/data

为什么这样解决跨域？

1. 浏览器视角：

   • 所有请求都发送到 www.frontend.com
   • API请求：www.frontend.com/api/data → 同源！
   • 完全符合同源策略

2. Nginx视角：

   • 收到 /api/data 请求
   • 去掉 /api 前缀
   • 转发到 www.backend.com/data
   • 返回响应给浏览器

3. 后端视角：

   • 收到来自 www.frontend.com 的请求
   • 不需要特殊处理跨域（因为请求直接来自服务器）

完整用户访问流程

用户浏览器 前端服务器 www.frontend.com Nginx (同前端服务器) 后端服务器 www.backend.com 1. 访问 https://www.frontend.com 2. 返回index.html+前端资源 3. 请求 /api/data (同源) 4. 转发请求 → https://www.backend.com/data 5. 返回API数据 6. 返回数据给浏览器 用户浏览器 前端服务器 www.frontend.com Nginx (同前端服务器) 后端服务器 www.backend.com

关键总结

1. 跨域本质：

   • 浏览器安全限制，不是服务器限制
   • 同源策略：协议+域名+端口相同

2. 解决方案对比：

   方案	部署位置	优点	缺点
   CORS	后端服务器	简单直接，无需代理	需修改后端代码
   Nginx代理	前端服务器	前端无需修改代码	需要服务器控制权
   API网关	独立服务器	专业解决方案	架构复杂

3. GitHub Pages限制：

   • 静态托管，无法运行Nginx
   • 只能使用CORS方案
   • 或迁移到支持自定义服务器的托管平台

新手部署建议

1. 简单项目：

   • 前端：Vercel/Netlify（免费，支持CORS配置）
   • 后端：云函数/Serverless
   • 使用CORS解决跨域

2. 完整项目：

   服务

   用户

   负载均衡器

   前端服务器

   API网关

   前端文件

   后端服务器1

   后端服务器2

3. 学习路径：

   1. 开发环境：使用Vite代理
   2. 小型项目：CORS方案
   3. 正式项目：
      • 购买云服务器
      • 学习Nginx配置
      • 使用Docker容器化部署
      • 添加HTTPS证书