点击按钮时如何将React DOM状态传至Node.js后端？Sails.js接收数据遇阻求方案

问题1：点击按钮时，如何将React DOM的状态信息传递至Node.js后端？ #

这是前后端数据交互的基础场景，核心流程就是收集前端状态 → 发起HTTP请求 → 后端接收并处理，我给你拆解成具体可落地的步骤：

• 第一步：在React组件里通过this.state（类组件）或者useState（函数组件）维护需要传递的状态数据，比如你代码里的subject和message
• 第二步：选个HTTP工具发起请求，Axios、原生Fetch API都可以，你用Axios是个很稳妥的选择
• 第三步：在Node.js（这里是Sails.js）后端配置对应的路由和控制器，专门接收并处理前端发过来的数据

问题2：前端已有逻辑，但Sails.js后端无法接收数据，求解决建议 #

先把你提供的前端代码补全（看起来有截断，我还原了常见的Axios写法）：

handleSubmit = () => { 
  // 收集要发送至API的数据
  const payload = { 
    subject: this.state.subject, 
    message: this.state.message, 
  }; 
  this.handleAjaxRequest(payload); 
}; 

// 向后端发送数据的方法——使用Axios实现
handleAjaxRequest = (payload) => { 
  let request = axios({ 
    method: 'POST', // 注意请求方法要和后端路由配置匹配
    url: '/api/messages', // 替换成你的Sails后端实际路由地址
    data: payload,
    headers: {
      'Content-Type': 'application/json' // 必须明确指定这个请求头
    }
  })
  .then(response => {
    console.log('请求成功:', response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });
};

针对Sails.js后端收不到数据的问题，给你几个排查和解决的核心关键点：

1. 核对请求方法与Sails路由的匹配度 #

Sails.js默认是RESTful路由风格，如果你前端用POST请求，一定要确保后端路由配置了对应的POST方法：

// config/routes.js
module.exports.routes = {
  'POST /api/messages': 'MessageController.create', // 对应控制器里的create处理方法
};

2. 确认Sails控制器接收数据的正确方式 #

Sails.js会自动把POST的JSON数据解析到req.body里，所以控制器代码要这么写：

// api/controllers/MessageController.js
module.exports = {
  create: async function(req, res) {
    // 直接从req.body里取前端传过来的参数
    const { subject, message } = req.body;
    console.log('收到前端数据:', subject, message);
    
    // 后续业务处理：比如存入数据库
    const newMessage = await Message.create({ subject, message }).fetch();
    return res.ok(newMessage);
  }
};

3. 检查前端请求的Content-Type #

如果前端没设置Content-Type: application/json，Sails可能无法正确解析JSON格式的请求体，所以一定要在Axios请求里加上这个请求头（我已经在上面的代码里补上了）。

4. 排查跨域（CORS）配置（如果前后端不在同一域名/端口） #

如果你的React前端和Sails后端运行在不同的域名或端口，必须确保Sails的CORS配置允许前端的请求：

// config/cors.js
module.exports.cors = {
  origin: '*', // 开发环境可以临时用*，生产环境要指定具体的前端域名
  credentials: true,
  headers: 'Content-Type, Authorization'
};

5. 用浏览器开发者工具排查请求细节 #

打开浏览器的Network面板，查看你的POST请求：

• 检查Request Payload里有没有正确携带subject和message数据
• 查看Response的状态码：404说明路由配置错误；500说明后端代码有逻辑错误；403可能是CORS或权限问题

内容的提问来源于stack exchange，提问作者Dženis H.