Node服务端向React客户端传递变量失败问题求助

核心问题分析 #

你的服务端（8080端口）与React应用（3000端口）是两个独立运行的服务，直接在React的index.html中使用服务端模板语法<%= userid %>无效——因为React的页面是由webpack-dev-server（3000端口）托管的，根本没经过你的服务端模板渲染流程，自然找不到userid变量。

可行解决方案 #

方案1：通过接口请求动态获取变量 #

1. 在服务端server.js中新增接口返回userid：

// 原生http服务示例
const http = require('http');
const server = http.createServer((req, res) => {
  if (req.url === '/api/userid') {
    // 添加跨域允许头，避免React请求被拦截
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.writeHead(200, {'Content-Type': 'application/json'});
    res.end(JSON.stringify({userid: '你的用户ID值'}));
  }
});
server.listen(8080);

2. 在React组件中发起请求获取：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    fetch('http://localhost:8080/api/userid')
      .then(res => res.json())
      .then(data => {
        window.userid = data.userid;
        // 也可直接在组件内使用该值
      })
      .catch(err => console.error('获取userid失败：', err));
  }, []);

  return <div>你的React内容</div>;
}

方案2：将React构建产物交给服务端托管渲染 #

1. 执行npm run build打包React应用，得到build目录。
2. 修改服务端server.js，托管静态文件并注入变量：

// Express+EJS示例
const express = require('express');
const app = express();
const path = require('path');

app.set('view engine', 'ejs');
// 托管React构建后的静态资源
app.use(express.static(path.join(__dirname, '../reactapp/build')));

app.get('/', (req, res) => {
  const userid = '你的用户ID值';
  // 渲染模板（需将React的index.html改名为index.ejs）
  res.render('index', { userid });
});

app.listen(8080);

3. 将React原index.html重命名为index.ejs，保留注入脚本：

<script> window.userid = '<%= userid %>' </script>

之后访问http://localhost:8080即可，此时页面会经过服务端渲染注入变量。

方案3：构建时通过环境变量传递（适用于变量已知的场景） #

1. 在React项目根目录创建.env文件：

REACT_APP_USERID=你的用户ID值

2. 在React组件中直接调用：

const userid = process.env.REACT_APP_USERID;
window.userid = userid;

注意：变量名必须以REACT_APP_开头，修改后需重启React开发服务。

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