React向非Rails Ruby后端POST提交推文时始终生成空内容问题

核心问题 #

前端fetch请求参数配置错误：fetch API 没有params这个配置项，你填写的tweet内容根本没有被发送到后端，导致后端拿到的params[:tweet]为空，写入数据库自然是空内容。
另外tweetChangeHandler中的event.preventDefault()是冗余代码，onChange事件不需要阻止默认行为，可以直接删除，不过该问题不影响当前传参逻辑。

分步修复方案 #

• 第一步：修正前端POST请求逻辑 #

把postTweet方法修改为如下内容：

const postTweet = async () => {
  const postRequest = {
    method: "POST",
    // 增加请求头，指定传输内容为JSON格式
    headers: {
      "Content-Type": "application/json",
    },
    // 用body字段传递请求体，序列化转为JSON字符串
    body: JSON.stringify({tweet: tweet}),
  };
  // 增加await等待POST请求完成后再拉取最新推文列表
  await fetch("http://127.0.0.1:9292/tweets", postRequest).then((response) =>
    response.json().then((data) => {
      console.log(data);
    })
  );
  fetchTweets();
};

• 第二步：修正Ruby后端JSON请求解析逻辑 #

如果你用的是Sinatra框架，需要先开启JSON参数解析，在路由文件顶部添加如下代码：

require 'json'
before do
  if request.content_type == 'application/json'
    body_params = JSON.parse(request.body.read)
    params.merge!(body_params)
  end
end

• 第三步：修复SQL注入风险（重要） #

你当前的create方法直接拼接SQL字符串，存在严重的SQL注入漏洞，修改为参数化查询：

def self.create(tweet:)
  # 用$1作为参数占位符，把tweet作为参数传入避免注入
  result = DatabaseConnection.query("INSERT INTO tweets (tweet) VALUES ($1) RETURNING id, tweet;", [tweet])
  Tweet.new(
    id: result[0]['id'], 
    tweet: result[0]['tweet']
  )
end

排查验证步骤 #

如果修改后还有问题，可以按以下顺序排查：

1. 打开浏览器控制台的网络面板，查看POST请求的请求体，确认tweet字段已经正确携带你输入的内容
2. 在Ruby后端的post '/tweets'路由中添加打印日志p params，查看后端是否正确接收到tweet参数
3. 检查数据库tweets表的tweet字段是否设置了非空约束、字段长度限制，排除字段配置问题

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