Qoder实现前后端分离有五种路径：一、Nginx静态托管+Spring Boot API完全分离；二、DevServer代理解决开发跨域；三、Spring Cloud Gateway统一网关；四、ModelProxy契约驱动开发；五、qoder-cli一键生成分离骨架。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您正在使用Qoder构建Web应用，但发现前端界面与后端逻辑仍存在耦合、接口联调低效或部署无法独立，则可能是由于未正确实施前后端分离架构。以下是Qoder环境下实现前后端分离的多种配置方法与架构设计路径：
一、基于Nginx静态托管+Spring Boot API服务的完全分离模式
该模式将Qoder生成的前端代码（如Vue项目）通过npm run build产出静态资源，交由Nginx统一托管；后端服务以独立JAR包形式运行于Java进程，两者物理隔离，仅通过HTTP API通信。此方式彻底规避开发服务器代理依赖，符合生产环境最佳实践。
1、在Qoder项目中执行npm run build命令，生成dist目录下的静态文件。
2、将dist目录整体复制至Linux服务器的/usr/share/nginx/html/路径下。
3、修改Nginx配置文件/etc/nginx/conf.d/qoder.conf，设置根目录为该路径，并添加反向代理规则指向后端服务：
4、启动Spring Boot后端服务：java -jar qoder-backend.jar --server.port=8080。
5、重启Nginx：systemctl restart nginx，此时前端页面通过http://your-domain.com访问，所有/api/前缀请求自动转发至http://localhost:8080/api/。
二、利用Qoder内置DevServer代理解决开发阶段跨域
在本地开发过程中，Qoder前端工程默认运行于Vite或Vue CLI开发服务器（如端口5173），而API服务运行于8080端口，浏览器因同源策略拒绝跨域请求。Qoder支持在vite.config.ts或vue.config.js中配置proxyTable，将前端请求透明转发至后端，避免手动修改Axios baseURL或启用CORS调试模式。
1、打开前端项目根目录下的vite.config.ts文件。
2、在server.proxy配置项中添加如下规则：
3、确保后端Spring Boot应用已开启CORS支持，在主类或全局配置类中添加@CrossOrigin(origins = "http://localhost:5173")注解，或配置全局CORS Bean。
4、重启Vite开发服务，所有以/api/开头的请求将被自动代理至http://localhost:8080，前端代码无需感知后端地址变化。
三、采用Qoder集成的API网关统一接入层
当Qoder项目演进为多微服务架构时，可引入Spring Cloud Gateway作为统一API网关，前端所有请求均指向网关地址，由网关完成路由分发、鉴权、限流等操作。该方式将跨域、认证、版本控制等通用能力下沉至网关，前端完全解耦具体服务实例位置。
1、在Qoder后端模块中新增gateway子模块，引入spring-cloud-starter-gateway依赖。
2、配置application.yml，定义路由规则，例如将/user/**转发至lb://user-service，将/traffic/**转发至lb://traffic-monitor-service。
代码编辑 CLI 工具集合：Cursor CLI（agent）和 Qoder CLI（qodercli），用于代码修改、重构、Code Review 及自动化代码任务。
3、在Nginx中将所有/api/请求反向代理至网关服务端口（如9000），而非直接代理至具体业务服务。
4、前端Axios baseURL统一设为/api，由Nginx转发至网关，再由网关路由至对应微服务。
5、启动Nacos注册中心、各微服务及网关，验证http://your-domain.com/api/user/list可正常返回用户数据。
四、通过Qoder ModelProxy中间件实现接口契约驱动开发
为解决前后端接口约定分散、Mock数据维护成本高、联调效率低等问题，Qoder支持集成Midway-ModelProxy中间件。该方案要求后端提前提供标准OpenAPI 3.0规范（如openapi.json），前端据此自动生成TypeScript接口定义与Mock服务，实现“契约先行、并行开发”。
1、后端在Qoder项目中使用springdoc-openapi-ui插件暴露/v3/api-docs端点，生成标准OpenAPI文档。
2、前端执行npx @midwayjs/modelproxy init命令，根据OpenAPI文档生成interface.json与mock/目录。
3、启动ModelProxy Mock服务：npx @midwayjs/modelproxy start，监听端口7001。
4、在Vite配置中将/api/代理指向http://localhost:7001，开发阶段所有API请求由Mock服务响应。
5、待后端服务就绪后，仅需切换代理目标至真实后端地址，无需修改任何接口调用代码。
五、基于Qoder CLI一键生成分离式项目骨架
Qoder提供官方CLI工具qoder-cli，支持通过交互式命令初始化具备前后端分离结构的全栈项目模板，内置Nginx配置示例、Dockerfile、CI/CD脚本及标准化API通信规范，大幅降低架构搭建门槛。
1、全局安装CLI：npm install -g qoder-cli。
2、执行qoder create my-qoder-app --separated，选择Vue3 + Spring Boot组合。
3、CLI自动创建frontend/与backend/两个子目录，并在frontend/deploy/nginx.conf中预置生产级Nginx配置。
4、进入backend/目录执行mvn clean package，生成可执行JAR；进入frontend/执行npm run build生成静态资源。
5、将构建产物按CLI生成的deploy.sh脚本部署至目标服务器，整个过程无需手动编写路由规则或处理跨域头。
