在 code-server 中正确调试 React（react-scripts）解决办法

背景问题

在 code-server 中运行 React（使用 react-scripts）时，浏览器访问路径通常是：

/proxy/<port>/

但 React 的静态资源（bundle.js、CSS、HMR WebSocket）实际需要从：

/absproxy/<port>/

加载。

如果路径不一致，会导致：

• bundle.js 返回 HTML → Unexpected token '<'
• 静态资源全部 404
• HMR（热更新）无法连接
• 页面空白

解决方案

1. 创建或修改 .env.development

1
2
3

PORT=3003
PUBLIC_URL=/absproxy/3003/
WDS_SOCKET_PATH=/absproxy/3003/ws

注意：
/proxy/3003/ 是浏览器看到的路径，
/absproxy/3003/ 才是 React 静态资源必须使用的真实路径。

2. 启动 React

1

npm start

3. 浏览器访问

https://你的域名/proxy/3003/

code-server 会自动将其映射到：

/absproxy/3003/

React 的资源路径也会自动正确。

原理说明

React 默认生成的资源路径是：

/static/js/bundle.js

但 code-server 的代理路径是：

/absproxy/3003/static/js/bundle.js

如果不设置 PUBLIC_URL，React 会继续请求根路径 /static/...，导致：

• bundle.js → 404
• 返回 HTML → Unexpected token '<'
• HMR WebSocket 连接失败

设置：

PUBLIC_URL=/absproxy/3003/
WDS_SOCKET_PATH=/absproxy/3003/ws

后，React 会自动生成正确路径。

官方文档参考

code-server 官方文档（Proxying / absproxy）：

https://coder.com/docs/code-server/latest/guide#proxying

文档说明：前端开发工具必须使用 /absproxy/<port>/ 才能正确加载资源。

总结

最终只需要修改 .env.development或者.env.development.local 即可解决所有问题。