VS Code-Server代理环境下React Web应用静态资源加载异常问题

问题原因 #

VS Code Server默认通过http://{yoursite}/proxy/3000预览应用，但React开发服务器默认假设应用部署在域名根路径，生成的静态资源路径为绝对路径（如/static/js/bundle.js）。当浏览器发起请求时，会直接向http://{yoursite}/static/js/bundle.js发送请求，而非代理路径下的对应资源，再加上React SPA的路由fallback配置，导致这类请求最终返回index.html而非实际静态资源。

解决方案 #

针对Create React App创建的项目 #

1. 打开项目根目录下的package.json，添加homepage字段，值设为代理路径：

{
  "name": "your-react-app",
  "homepage": "/proxy/3000",
  // 其他原有字段...
}

2. 重启React开发服务器，此时静态资源的请求路径会自动带上/proxy/3000前缀，VS Code Server的代理就能正确转发到对应资源。

针对Vite创建的React项目 #

1. 打开项目根目录下的vite.config.js，修改base配置为代理路径：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/proxy/3000/'
})

2. 重启Vite开发服务器即可生效。

内容的提问来源于stack exchange，提问作者RAY