React/Rails应用Post请求报错500/422及文件上传编辑问题求助

错误1：NoMethodError (undefined method 'projects' for nil:NilClass) #

原因 #

控制器中调用current_user.projects时current_user为nil。Rails前端同域请求会自动携带session凭证，但React发起的API请求未手动传递认证信息，导致无法识别当前用户。

解决步骤 #

• 携带认证凭证：React请求中添加credentials: 'include'（同域场景），确保session cookie被传递：

  fetch('/api/v1/projects/' + projectId, {
    method: 'PATCH',
    credentials: 'include',
    body: formData
  });
  

• 添加CSRF Token：同域请求需在请求头中携带Rails的CSRF Token，可从页面meta标签获取：

  const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
  fetch('/api/v1/projects/' + projectId, {
    headers: { 'X-CSRF-Token': csrfToken },
    // 其他配置
  });
  

• 确认认证逻辑：若使用Devise，需在config/initializers/devise.rb中开启API模式的认证支持：

  config.http_authenticatable_on_xhr = true
  

错误2：ActionController::ParameterMissing (param is missing or the value is empty: project) #

原因 #

React提交的FormData未将参数包裹在project命名空间下，而Rails强参数要求params.require(:project)。标题和描述能修改是因为之前的请求参数格式偶然符合，但文件字段未正确包裹。

解决步骤 #

• 正确构造FormData：所有字段需以project[字段名]作为key：

  const formData = new FormData();
  formData.append('project[title]', formState.title);
  formData.append('project[description]', formState.description);
  if (formState.file) {
    formData.append('project[file]', formState.file); // 文件字段必须包裹在project下
  }
  

• 不要手动设置Content-Type：浏览器会自动为FormData添加multipart/form-data及正确的boundary，手动设置会导致参数解析失败。

额外修复：文件编辑失效 #

• 更新强参数：确保控制器的project_params允许文件字段：

  def project_params
    params.require(:project).permit(:title, :description, :file) # 添加:file字段
  end
  

• 跨域配置（若适用）：如果React和Rails跨域部署，需在config/initializers/cors.rb中允许携带凭证：

  Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
      origins 'http://localhost:3000' # 替换为你的React部署地址
      resource '*',
        headers: :any,
        methods: [:get, :post, :put, :patch, :delete],
        credentials: true
    end
  end
  

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