基于Express服务端实现React与PHP通信的问题解决方案咨询

1. 优先解决跨域问题 #

这是前端拿不到返回结果的最高频原因，Express侧没有配置CORS头时，只要React端的域名/端口和Express服务不一致，就会被浏览器同源策略拦截请求。
解决方案：

• 安装cors中间件：npm install cors
• 在Express主文件（通常为app.js/index.js）中引入并启用：

const cors = require('cors');
app.use(cors()); // 全局允许跨域，也可单独给/member路由配置规则

不想安装依赖也可以手动配置响应头：

router.post('/member', (req, res, next) => {
  // 路由逻辑开头加以下配置
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  // 处理OPTIONS预检请求
  if (req.method === 'OPTIONS') return res.sendStatus(200);

  // 后续原有逻辑
})

2. 简化请求体解析逻辑 #

你当前手动监听data事件拼接请求体的写法，可以直接替换为Express内置的body解析中间件，避免手动解析出错：

• Express v4.16以上版本已经内置json和urlencoded解析能力，直接在主文件启用即可：

app.use(express.json()); // 解析JSON格式请求体
app.use(express.urlencoded({ extended: true })); // 解析表单格式请求体

启用后你的路由代码可以简化为：

const request = require('request');
router.post('/member', (req, res) => {
  const POST = req.body; // 直接获取解析完成的请求体，无需自行拼接
  console.log(POST); // 可在此验证PHP发送的数据是否正常

  request.post({
    url: 'https://nfts.perproject.io',
    json: POST,
    headers: { 'Content-type': 'application/json; charset=utf-8' } // 原有代码此处漏了分号
  }, (err, httpResponse, body) => {
    if (err) {
      return res.status(500).json({ data: POST, msg: 'cannot post to target url' });
    }
    // 若需要返回第三方接口的结果给前端就传入body，不需要则直接传POST
    res.json({ data: POST });
  })
})

3. 确认React端请求逻辑符合规范 #

React端发请求时注意匹配请求格式，例如用fetch发起POST请求的示例：

fetch('http://你的Express服务实际地址/member', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  // 若需要传参给Express则加body字段，无参数可以省略
  // body: JSON.stringify({xxx: xxx})
})
.then(res => res.json())
.then(data => console.log('获取到的返回数据：', data))
.catch(err => console.error('请求出错：', err))

替代实现思路 #

你当前的链路是PHP→Express→React走请求→响应模式，仅支持React主动发起请求才能拿到数据。如果需要PHP操作完成后实时主动推数据给React，可以采用WebSocket方案：Express侧集成socket.io，React端接入socket.io客户端，PHP处理完操作后发请求到Express指定接口，Express收到请求后通过WebSocket主动推送数据给在线的React客户端。

内容的提问来源于stack exchange，提问作者김대현