React+CodeIgniter4编辑功能PUT请求出现500内部服务器错误求助

问题描述 #

用React.js做前端、CodeIgniter4做后端实现数据编辑功能时，发送PUT http://localhost:8080/staf/3请求返回500 Internal Server Error，需要排查解决。

相关代码 #

前端StafsUpdate.js代码 #

export default function StafsUpdate() {
  const classes = useStyles();
  const navigate = useNavigate();
  const axios = require('axios')

  
  const { id } = useParams();
  const [staf_nama, setNama] = useState('');
  const [staf_jabatan, setJabatan] = useState('');
  const [staf_email, setEmail] = useState('');
  const [staf_telp, setTelp] = useState('');

  const [dbo_staf, setStaf] = useState([]);


 useEffect(() => {
    fetch("http://localhost:8080/staf/"+id)
      .then(res => res.json())
      .then(
        (result) => {
          setNama(result.staf.staf_nama)
          setJabatan(result.staf.staf_jabatan)
          setEmail(result.staf.staf_email)
          setTelp(result.staf.staf_telp)
        }
      )
  }, [id])

  const handleSubmit = event => {
    event.preventDefault();
    var data = {
      staf_id: id,
      staf_nama: staf_nama,
      staf_jabatan: staf_jabatan,
      staf_telp: staf_telp,
    }
    fetch('http://localhost:8080/staf/'+id, {
      method: 'PUT',
      headers: {
        Accept: 'application/form-data',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
   
    .then(
      (result) => {
        alert(result['message'])
        if (result['status'] === 'ok') {
          window.location.href = '/stafs';
        }
      }
    )
  }

后端Controller代码 #

public function update($id = null)
    {
        $model = new StafModel();
        $input = $this->request->getRawInput();
        $data = [
          
            // 'staf_admin' => $input['staf_admin'],
            'staf_nama' => $input['staf_nama'],
            'staf_jabatan' => $input['staf_jabatan'],
            'staf_email' => $input['staf_email'],
            'staf_telp' => $input['staf_telp'],
        ];
        $model->update($id, $data);

        $response = [
            'status'   => 200,
            'error'    => null,
            'messages' => [
                'success' => 'Data Updated'
            ]
        ];
        return $this->respond($response);
    }

排查与解决建议 #

• 补全请求字段：前端提交的data里缺少staf_email字段，但后端代码尝试获取$input['staf_email']，这会直接引发PHP报错。需要在前端提交数据中添加staf_email: staf_email。
• 查看CI4错误日志：CI4的错误日志默认存放在writable/logs目录，打开最新日志文件，能看到具体错误原因，比如数据库字段是否允许为空、模型验证规则是否不满足等。
• 验证请求解析结果：在后端代码开头添加var_dump($input); exit;，查看是否正确解析了前端发送的JSON数据，确认字段是否都能获取到。
• 检查模型允许字段：确认StafModel中的$allowedFields数组是否包含staf_nama、staf_jabatan、staf_email、staf_telp，CI4会拒绝更新未在该数组中声明的字段。
• 修复前端响应处理：前端fetch请求没有解析响应为JSON，且未处理错误，修改后代码如下：

  fetch('http://localhost:8080/staf/'+id, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
  .then(res => {
    if (!res.ok) throw new Error('请求失败');
    return res.json();
  })
  .then(data => {
    alert(data.messages.success);
    window.location.href = '/stafs';
  })
  .catch(err => console.error('错误信息:', err));
  

• 确认CORS配置：检查CI4是否配置了CORS规则，允许PUT请求跨域访问，避免因跨域配置间接引发错误。

内容的提问来源于stack exchange，提问作者Lussy Ika