Django与React Native对接时/bookings/remove/端点CSRF缺失403错误求助

问题解决思路与修复方案 #

核心问题定位

1. 请求URL不匹配后端路由：后端定义的是路径参数<int:booking_id>，但前端错误使用查询参数?booking_id=xxx发起请求，导致路由未命中目标视图，@csrf_exempt注解未生效，触发CSRF检查。
2. Axios请求参数顺序错误：将请求头放在了请求体参数位置，而非配置项中，导致X-CSRFToken和Authorization头未被正确携带。

具体修复步骤

1. 修正前端请求URL格式

将查询参数改为路径参数，匹配后端路由规则：

// 原错误URL
// `http://127.0.0.1:8000/bookings/remove/?booking_id=${booking.booking_id}/`

// 修正后URL
`http://127.0.0.1:8000/bookings/remove/${booking.booking_id}/`

2. 修正Axios请求写法

Axios的post方法参数顺序为url, data, config，需将请求头放在第三个参数的config中（无请求体时第二个参数传空对象）：

const handleBookingCancellation = async (booking) => {
  try {
    const csrfToken = await getCsrfToken();
    if (!csrfToken) {
      Alert.alert('Error', 'Failed to fetch CSRF token');
      return;
    }
    const accessToken = await SecureStore.getItemAsync('access');
    // 修正Axios请求结构
    const response = await axios.post(
      `http://127.0.0.1:8000/bookings/remove/${booking.booking_id}/`,
      {}, // 空请求体（POST无需传递数据）
      {
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'X-CSRFToken': csrfToken 
        },
      }
    );

    Alert.alert("Booking Cancelled", `Booking ID: ${booking.booking_id}`);
    console.log(response);
  } catch (error) {
    console.error('Error cancelling booking', error);
    Alert.alert('Error', 'There was an error cancelling the booking');
  }
};

3. 可选：优化后端CSRF防护（增强安全性）

修复后可移除视图上的@csrf_exempt注解，依赖前端正确携带CSRF Token完成验证，保留Django的CSRF防护机制。

验证要点

• 确认前端请求URL为/bookings/remove/[booking_id]/格式，无查询参数
• 通过调试工具检查请求头中是否包含X-CSRFToken和Authorization
• 后端日志应显示请求匹配到cancel_the_booking视图，而非CSRF缺失的403错误

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