前端OR后端 VS 前端AND后端

### DevBox 环境中前端连接后端的方法 在 DevBox 环境下，为了使前端能够顺利调用后端 API 接口，通常采用以下几种方法来建立前后端之间的通信： #### 1. 使用本地代理服务器 通过配置 Webpack 或其他构建工具中的 `proxy` 属性，在开发阶段设置一个简单的 HTTP 代理。这样可以解决跨域请求的问题，并让前端应用看起来像是直接向自己的域名发起请求。 对于基于 Create React App 的项目来说，可以在 package.json 文件里添加如下字段[^2]: ```json { "proxy": "http://localhost:8080" } ``` 这里的 `"http://localhost:8080"` 是指代后端服务所在的地址和端口号。 #### 2. CORS 配置调整 如果不想使用代理的方式，则可以通过修改后端应用程序的 Cross-Origin Resource Sharing (CORS) 设置允许来自特定源的请求。这种方式适用于生产环境部署时也需要支持跨域的情况。 例如，在 Express.js 中启用 CORS 可以这样做： ```javascript const express = require('express'); const cors = require('cors'); let app = express(); app.use(cors()); // or specify allowed origins explicitly: // app.use(cors({ origin: 'http://example.com' })); ``` #### 3. Docker Compose 组合容器化解决方案 当整个系统由多个微服务组成时，利用 Docker Compose 来编排这些服务会更加方便高效。在这种情况下，所有的服务都在同一个网络空间内运行，因此可以直接通过服务名称相互访问而无需担心主机名解析等问题。 创建 docker-compose.yml 文件定义所需的服务组合： ```yaml version: '3' services: frontend: build: ./frontend ports: - "3000:3000" backend: build: ./backend environment: NODE_ENV: development expose: - "8080" ``` 此时，前端就可以轻松地通过相对路径 `/api/*` 访问到同属一个 compose project 下的后端服务了。 以上就是在 DevBox 开发环境下实现前后端交互的主要方式之一。具体选择哪种方案取决于项目的实际需求和技术栈特点。