React+Node.js跨服务器部署异常及配置优化求助

一、修正Apache虚拟主机配置 #

你的Apache配置错误地将所有请求转发到外部IP，导致前端静态文件无法被本地读取。修改mywebsie.xyz.conf，区分前端静态资源和API请求转发：

<VirtualHost *:80>
    ServerAdmin contact@mywebsie.xyz
    ServerName example.xyz
    DocumentRoot /var/www/example.xyz

    # 映射前端构建目录
    Alias /dist /var/www/example.xyz/dist
    <Directory /var/www/example.xyz/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    # 仅转发API路径到后端Node服务
    ProxyPass /api http://xxx.xx.xxx.215:8005/api
    ProxyPassReverse /api http://xxx.xx.xxx.215:8005/api

    # 兼容React单页路由：非API/非静态文件请求指向index.html
    RewriteEngine On
    RewriteCond %{REQUEST_URI} !^/api
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ /dist/index.html [L]
</VirtualHost>

二、调整.htaccess规则 #

原配置阻止了JSON等文件访问，会导致前端或API请求失败，替换为以下内容：

DirectoryIndex /dist/index.html

# 修正静态资源路径映射
RewriteEngine On
RewriteRule ^assets/(.*)$ /dist/assets/$1 [L]

三、前端项目配置调整 #

在Vite配置中设置代理（开发环境），生产环境直接使用相对路径调用API：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://xxx.xx.xxx.215:8005',
        changeOrigin: true
      }
    }
  },
  build: {
    outDir: 'dist' // 确保构建产物输出到dist目录
  }
}

生产环境中，API请求统一使用/api/xxx格式，Apache会自动转发到后端服务。

四、部署与DNS调整 #

• 将example.xyz的DNS解析到VPS（Apache所在服务器）的IP
• 把React构建生成的dist目录上传到VPS的/var/www/example.xyz路径下，无需再使用原前端独立主机
• 后端Node服务保持在xxx.xx.xxx.215:8005，ReactNative直接通过该IP+端口调用API即可

五、验证操作 #

1. 重启Apache服务：sudo systemctl restart apache2
2. 访问http://example.xyz，检查页面是否正常加载
3. 打开浏览器开发者工具，确认API请求返回正常数据，无跨域或403错误

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