如何从Express服务器向React应用传递请求参数及请求头？

嘿，我来帮你搞定这个问题！从Express服务器把请求参数和头信息传递给React应用，其实有几种实用的方案，我结合你的代码场景给你详细拆解：

如果你的React是单页应用（SPA），最常规的方式就是让Express提供一个API接口，把需要的用户信息和请求头数据返回给前端，React通过AJAX请求获取。

Express端修改代码 #

你原来的中间件是设置req.user，可以把这个逻辑整合到API路由里：

const express = require('express');
const app = express();

// 自定义中间件：从请求头获取用户ID并挂载到req对象
app.use((req, res, next) => {
  req.user = req.headers["id"];
  next();
});

// 提供给React的API接口，返回用户信息和所需请求头
app.get('/api/user-data', (req, res) => {
  res.json({
    userId: req.user,
    // 按需返回请求头，避免泄露敏感信息（比如不要返回Authorization）
    requestHeaders: {
      origin: req.headers.origin,
      userAgent: req.headers['user-agent']
    }
  });
});

app.listen(3001, () => console.log('Express server running on port 3001'));

React端请求数据 #

在React组件里用fetch或者axios请求这个接口：

import { useEffect, useState } from 'react';

function UserProfile() {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    fetch('http://localhost:3001/api/user-data')
      .then(response => response.json())
      .then(data => {
        setUserData(data);
        console.log('拿到的用户ID:', data.userId);
        console.log('请求头信息:', data.requestHeaders);
      })
      .catch(error => console.error('请求出错:', error));
  }, []);

  return (
    <div className="profile">
      {userData ? (
        <>
          <h2>当前用户ID: {userData.userId}</h2>
          <p>请求来源: {userData.requestHeaders.origin}</p>
        </>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

export default UserProfile;

如果你的项目是SSR架构（比如用Next.js，或者自己搭Express+React SSR），可以直接把数据注入到HTML的全局变量里，React初始化时就能直接读取。

Express端模板渲染 #

假设你用EJS作为模板引擎，修改路由：

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  const userId = req.headers["id"];
  // 把数据转为JSON字符串，注入到模板中
  const initialData = JSON.stringify({
    userId: userId,
    requestHeaders: { id: req.headers["id"] }
  });
  res.render('index', { initialData });
});

HTML模板（views/index.ejs） #

在模板里添加全局变量，让React能直接读取：

<!DOCTYPE html>
<html>
<head>
  <title>React SSR App</title>
</head>
<body>
  <div id="root"></div>
  <!-- 注入全局变量 -->
  <script>
    window.__INITIAL_DATA__ = <%- initialData %>;
  </script>
  <script src="/static/bundle.js"></script>
</body>
</html>

React端读取全局变量 #

在React入口文件里直接使用这个全局数据：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 读取页面注入的全局变量
const initialData = window.__INITIAL_DATA__;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App initialData={initialData} />
  </React.StrictMode>
);

// App组件中使用传递来的初始数据
function App({ initialData }) {
  return (
    <div>
      <p>用户ID（来自SSR注入）: {initialData.userId}</p>
      <p>请求头ID: {initialData.requestHeaders.id}</p>
    </div>
  );
}

如果只需要传递少量简单数据，可以在Express的响应里设置自定义头，React在请求响应中读取这些头。

Express端设置自定义响应头 #

app.get('/api/headers', (req, res) => {
  const userId = req.headers["id"];
  // 设置自定义响应头，建议用X-前缀（行业习惯）
  res.set('X-User-ID', userId);
  res.set('X-Request-Origin', req.headers.origin);
  
  // 跨域场景必须配置这个，否则前端无法读取自定义响应头
  res.set('Access-Control-Expose-Headers', 'X-User-ID,X-Request-Origin');
  
  res.json({ success: true });
});

React端读取响应头 #

useEffect(() => {
  fetch('http://localhost:3001/api/headers')
    .then(res => {
      // 读取自定义响应头
      const userId = res.headers.get('X-User-ID');
      const origin = res.headers.get('X-Request-Origin');
      console.log('用户ID:', userId);
      console.log('请求来源:', origin);
      return res.json();
    })
    .then(data => console.log(data.success))
    .catch(err => console.error(err));
}, []);

关键注意事项 #

• 不要返回敏感请求头（比如Authorization、Cookie），避免安全风险；
• 跨域场景下，必须配置CORS的exposedHeaders，否则前端无法读取自定义响应头；
• 方案选择：SPA优先选方案1，SSR选方案2，少量简单数据选方案3。

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