开发时用Vite/Vue代理将/api请求转发至后端,生产用Nginx反向代理并严格匹配路径斜杠,前后端路由需对齐剥离层级,通过Network和curl快速定位代理或服务问题。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

你在本地开发Codex前端时调用后端API,浏览器控制台持续报错“CORS header ‘Access-Control-Allow-Origin’ missing”,页面白屏或数据加载失败,这不是前端代码写错了,而是请求根本没进到后端服务里——浏览器在预检阶段就拦下了。
开发环境:用Vite/React/Vue内置代理绕过跨域
第一步:打开项目根目录下的vite.config.ts(Vite)或vue.config.js(Vue CLI)或webpack.config.js(Webpack)。
第二步:在server.proxy中添加/api路径映射,例如:
proxy: { "/api": { target: "http://127.0.0.1:3001", changeOrigin: true, secure: false, rewrite: (path) => path.replace(/^\/api/, "") } }
这一步必须保留changeOrigin: true,否则Host头仍为localhost,后端日志会显示来源不可信。若后端校验Host或Referer,不加这一项会导致403。
第三步:前端发起请求时统一用/api/user/list这种相对路径,不要写http://127.0.0.1:3001/api/user/list——代理只劫持以/api开头的请求,硬编码完整URL会直接走真实网络,绕过代理。
生产环境:Nginx反向代理强制收敛请求入口
进入Nginx配置目录:sudo nano /etc/nginx/conf.d/codex.conf。
写入server块,关键点是location /api/和proxy_pass末尾斜杠必须同时存在:
location /api/ { proxy_pass http://127.0.0.1:3001/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }
【proxy_pass末尾的/不可省略】。省略后,/api/user会被转发成http://127.0.0.1:3001/api/user,而非后端实际监听的http://127.0.0.1:3001/user——90%的502错误源于此。
通过 Codex CLI 生成图片,支持尺寸控制和批量模式。依赖:codex (npm)。代理默认启用。用 generate.sh 生成单张,batch_generate.sh 批量生成游戏 UI 素材,gen_size.sh 指定尺寸。所有输出保存至 ~/.codex/generated_images/。
执行sudo nginx -t && sudo systemctl reload nginx验证并重载。此时前端所有/api请求将由Nginx代为转发,浏览器看到的是同源请求,CORS问题自然消失。
前后端协同:让Codex自动生成带代理适配的请求代码
方法一:给云哥(VSCode中Codex)固定指令
提问时结尾加上:“请生成Axios请求代码,并假设开发环境已配置Vite代理,所有接口以/api/xxx开头。”
方法二:给团哥(IDEA中Codex)同步约束
粘贴云哥输出的接口清单后,明确要求:“生成Controller时,路径定义为@RequestMapping("/user"),不加/api前缀——因Nginx已在入口层剥离。”
这一步漏掉,后端写成@RequestMapping("/api/user"),Nginx转发后变成/api/api/user,必然404。前端调用和后端路由必须严格对齐剥离层级。
紧急排查:快速定位是代理失效还是后端未响应
① 在浏览器开发者工具Network标签页,点击一个失败的/api请求,看Headers → General里的Request URL是否仍是http://localhost:5173/api/xxx(说明代理生效);若显示http://127.0.0.1:3001/api/xxx,说明前端硬编码了地址,代理未介入。
② 终端执行curl -v http://127.0.0.1:3001/user,确认后端本身能正常返回数据。如果这步都失败,问题不在跨域,而在后端服务未启动或端口被占。
③ 查Nginx错误日志:sudo tail -f /var/log/nginx/error.log,出现connect() failed (111: Connection refused)即表示proxy_pass指向的服务不可达,检查后端进程和端口。














