车辆API删除接口返回404错误问题排查求助

我开发了一款支持车辆录入、删除的API应用，执行删除车辆操作时返回404错误，但其他车辆相关端点均可正常访问，仅删除接口出现问题。相关代码如下：

前端删除功能代码 #

/* eslint-disable camelcase */
import React, { useState } from 'react';
// import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import axios from 'axios';
import styles from './DeleteCar.module.css';

const DeleteCarUi = ({
  id, image, model, year, cars, setCars,
}) => {
  const [errorMessage, setErrorMessage] = useState('');
  // const user = useSelector((state) => state.user);
  const removeCar = (id) => {
    axios
      .delete(`https://dreamcars2.onrender.com/api/v1/car/${id}`)
      .then((response) => {
        let filteredCars = [];
        filteredCars = cars.filter((car) => car.id !== id);
        setCars(filteredCars);
        // eslint-disable-next-line
        console.log(response);
      })
      .catch((error) => {
        setErrorMessage(error.response.data.error);
      });
  };

  return (
    <>
      <p className={`${styles.errorMsg} fs-5`}>{errorMessage}</p>
      <section className={`${styles.carCnt} mx-4`} key={id}>
        <div className={styles.imgCnt}>
          <img src={image} alt={model} className={styles.carImg} />
        </div>
        <div className="model-detail d-flex flex-column justify-content-center align-items-center">
          <h3 className="h4 mt-3">{model}</h3>
          <div className="d-flex flex-row justify-content-center align-items-center gap-0 mt-0">
            <h5 className="h6 pt-1">{year}</h5>
          </div>
        </div>
        <button
          type="button"
          onClick={() => removeCar(id)}
          className="btn btn-danger mb-3"
        >
          Delete
        </button>
      </section>
    </>
  );
};

DeleteCarUi.propTypes = {
  image: PropTypes.string.isRequired,
  model: PropTypes.string.isRequired,
  year: PropTypes.number.isRequired,
  id: PropTypes.number.isRequired,
  cars: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])).isRequired,
  setCars: PropTypes.func.isRequired,
};

export default DeleteCarUi;

车辆控制器删除方法代码 #

def delete
  @car = Car.find(params[:id])
  if @car.destroy
    render json: { success: 'The car has been deleted successfully' }, status: :ok
  else
    render json: { error: 'There was an error, please try again!' }, status: :internal_server_error
  end
end

路由配置代码 #

# Car endpoints
get 'api/v1/cars', to: 'cars#index'
get 'api/v1/car/:id', to: 'cars#show'
post 'api/v1/car', to: 'cars#create'
delete 'api/v1/car/:id', to: 'cars#delete'
get 'api/v1/reserve/cars/:start_date', to: 'cars#reserve'
get 'api/v1/cars/:user_id', to: 'cars#user_cars'

排查与解决步骤 #

1. 核对请求的URL和HTTP方法
   打开浏览器开发者工具的Network标签，查看删除请求详情：

• 确认请求URL为https://dreamcars2.onrender.com/api/v1/car/[正确车辆ID]，注意路径是单数car而非复数cars
• 确认请求方法为DELETE，而非其他方法

2. 验证后端路由匹配
   在Rails控制台执行以下命令，检查删除路由是否正确配置：

rails routes | grep delete

如果输出中没有DELETE /api/v1/car/:id指向cars#delete的条目，说明路由配置未生效，需检查路由文件是否正确保存或加载。

3. 检查车辆ID的有效性
   在Rails控制台执行Car.find([前端传递的车辆ID])，如果抛出ActiveRecord::RecordNotFound异常，说明该ID对应的车辆不存在，导致返回404。需确认前端传递的ID是否与数据库中车辆ID一致。

4. 排除CSRF保护干扰
   如果是纯API应用，需在CarsController中添加CSRF跳过逻辑，避免非GET请求被拦截：

class CarsController < ApplicationController
  skip_before_action :verify_authenticity_token
  # 其他代码...
end

（注：CSRF拦截通常返回403错误，但可作为排查项排除）

5. 确认路由顺序无冲突
   当前路由中delete 'api/v1/car/:id'位于其他相似路径路由之前，不会被覆盖，若后续调整路由顺序，需确保特定路径路由放在通配符路由之前。

内容的提问来源于stack exchange，提问作者Artur Gouveia