本地前端独立开发（后端未启动）登录解决方案
一、问题背景
本地启动 React+Vite 前端项目后，若后端服务未启动或本地后端环境异常，直接访问本地页面（如 http://localhost:5173/chat）会因无法调用登录接口，导致无法正常登录系统，阻碍前端功能开发与调试。
二、解决思路
利用测试环境已部署的后端服务（后端代码已提交至测试服），通过临时切换前端代理目标地址，先登录测试服获取有效 token，再将 token 复用至本地项目，实现本地前端免后端登录。
三、操作步骤
1. 切换前端代理至测试环境
- 打开前端项目根目录下的
vite.config.js文件，找到代理（proxy）配置项。 - 将代理中的
target地址，从本地后端地址（如http://localhost:8080）修改为测试环境后端地址（如http://test-api.xxx.com）。 - 保存配置文件，重启本地前端服务（确保配置生效）。
2. 登录测试服获取 token
- 访问本地前端启动地址（如
http://localhost:5173），进入登录页面。 - 输入测试环境的有效账号密码，点击登录。
- 登录成功后，浏览器会自动存储测试服返回的用户 token（通常存储在 localStorage/sessionStorage 中）。
3. 切换回本地页面并复用 token
- 无需退出登录，直接在浏览器地址栏中，将路径修改为本地需开发的页面（如
http://localhost:5173/chat）。 - 回车访问，前端会自动读取已存储的测试服 token，正常请求测试环境接口，实现本地页面免登录开发。
四、注意事项
- 测试环境与本地前端项目需保持版本兼容，避免因接口字段、权限规则差异导致功能异常。
- 开发完成后，需及时将
vite.config.js中的target改回本地后端地址，避免提交错误配置。 - 若测试服 token 过期，需重复步骤 2 重新获取。
- 敏感操作（如数据提交）需谨慎，避免误操作测试环境数据。