ReactJS请求Django REST Framework接口出现403/CSRF错误咨询

你遇到的403错误核心原因是Django的CSRF校验未通过，localhost未被加入CSRF信任域名列表，局域网IP因符合默认信任规则所以可以正常访问，可按以下优先级选择方案解决：

方案1：配置CSRF信任域名（最推荐，不改动现有逻辑） #

在Django的settings.py文件中添加CSRF_TRUSTED_ORIGINS配置，将localhost加入信任列表：

CSRF_TRUSTED_ORIGINS = [
    'http://localhost:3000',
    'http://172.22.192.1:3000',
    # 生产环境请替换为实际部署域名
]

修改后重启Django服务即可生效。

方案2：DRF接口豁免CSRF校验（适合纯前后端分离、Token认证场景） #

如果你的项目是纯前后端分离架构，使用Token认证而非Session认证，可以直接在DRF配置中关闭Session认证，从根源避免CSRF校验：
在settings.py中修改REST_FRAMEWORK配置：

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.TokenAuthentication',
        # 注释掉SessionAuthentication即可关闭对应CSRF校验
        # 'rest_framework.authentication.SessionAuthentication',
    )
}

如果仅需要豁免单个接口的CSRF校验，可以给对应Django视图添加csrf_exempt装饰器：

from django.views.decorators.csrf import csrf_exempt
from django.http import HttpResponse

@csrf_exempt
def user_view(request):
    # 你的视图逻辑
    return HttpResponse('ok')

方案3：请求携带CSRF Token（适合需要保留Session认证的场景） #

如果必须使用Session认证，需要在前端请求头中携带CSRF Token：

1. 首先添加获取Cookie中CSRF Token的方法：

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

2. 修改fetch请求，添加X-CSRFToken请求头：

fetch('/api/user/', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'X-CSRFToken': getCookie('csrftoken')
    },
    body: JSON.stringify(obj)
})

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