在 React 应用程序中使用 axios.post 到 Django 端点时出现 403 错误代码

Posted 2023-03-31

【中文标题】在 React 应用程序中使用 axios.post 到 Django 端点时出现 403 错误代码

【英文标题】：403 error code when using axios.post to Django endpoint in React app

【发布时间】：2017-08-23 17:01:30

【问题描述】：

当我尝试从我的 react 应用程序中向 django 视图发出简单的发布请求时，我收到了 403。这是我的代码：

views.py

@csrf_protect
def test_view():
    if (request.method == 'POST'):
        return HttpResponse(request.body)

Login.js（反应组件）

import Cookies from 'js-cookie';

//React constructor 

  test_view() 
      const csrftoken = Cookies.get('csrftoken');
      const config = 
        headers: 'HTTP_X_CSRFTOKEN': csrftoken,
      
      axios.post('/prototype/hello/', firstName: 'Fred', config)
        .then(res => console.log("Test res: " + res.data));
  
//

urls.py

    url(r'^hello', views.test_view, name='test-view'),

'js-cookie' 库是否可能不起作用？我在任何地方都没有 % csrf_token % 因为我没有使用 index.html 以外的 django 模板。相反，我有 @csrf_protect 装饰器。根据docs，我认为这是我应该做的。

【问题讨论】：

如果您没有禁用 csrfmiddleware，则不必使用 csrf_protect。您是否确认 cookie 确实获得了 csrf_token ？

【参考方案1】：

只需设置以下设置。不需要其他任何东西。

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';