这是一个教育项目,不是为了生产.我不打算让用户登录.

我可以在没有用户登录的情况下使用CSRF令牌向Django进行POST通话吗?我可以不使用jQuery来完成这项工作吗?我在这里有点不知所措,肯定混淆了一些概念.

在JavaScript方面,我找到了这个redux-csrf包.我不知道如何使用Axios将其与我的POST动作结合起来:

export const addJob = (title, hourly, tax) => {
  console.log("Trying to addJob: ", title, hourly, tax)
  return (dispatch) => {
    dispatch(requestData("addJob"));
    return axios({
      method: 'post',
      url: "/api/jobs",
      data: {
        "title": title,
        "hourly_rate": hourly,
        "tax_rate": tax
      },
      responseType: 'json'
    })
      .then((response) => {
        dispatch(receiveData(response.data, "addJob"));
      })
      .catch((response) => {
        dispatch(receiveError(response.data, "addJob"));
      })
  }
};

在Django方面,我已经阅读了this documentation篇关于CSRF的文章,以及this篇关于如何使用基于类的视图的文章.

以下是我目前的看法:

class JobsHandler(View):

    def get(self, request):
        with open('./data/jobs.json', 'r') as f:
            jobs = json.loads(f.read())

        return HttpResponse(json.dumps(jobs))

    def post(self, request):
        with open('./data/jobs.json', 'r') as f:
            jobs = json.loads(f.read())

        new_job = request.to_dict()
        id = new_job['title']
        jobs[id] = new_job

        with open('./data/jobs.json', 'w') as f:
            f.write(json.dumps(jobs, indent=4, separators=(',', ': ')))

        return HttpResponse(json.dumps(jobs[id]))

我试着使用csrf_exempt装潢师只是为了暂时不必担心这个问题,但这似乎不是它的工作原理.

我在模板中添加了{% csrf_token %}个.

这是我的getCookie种方法(从Django docs偷来的):

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

I've read我需要更改Axios CSRF信息:

var axios = require("axios");
var axiosDefaults = require("axios/lib/defaults");

axiosDefaults.xsrfCookieName = "csrftoken"
axiosDefaults.xsrfHeaderName = "X-CSRFToken"

我应该把实际的 token 放在哪里,我从拨打getCookie('csrftoken')得到的值?

推荐答案

这个问题;A是从2016年开始的,毫不奇怪,我相信事情已经发生了变化.这个答案会继续获得投票,所以我将添加其他答案的新信息,但保留原始答案.

请在 comments 中告诉我哪种解决方案适合您.

选项1.设置默认标题

在要导入Axios的文件中,设置默认标题:

import axios from 'axios';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
axios.defaults.xsrfCookieName = "csrftoken";

Select 2.手动将其添加到Axios调用中

假设你已经将令牌的值存储在一个名为csrfToken的变量中.在axios调用中设置标题:

// ...
method: 'post',
url: '/api/data',
data: {...},
headers: {"X-CSRFToken": csrfToken},
// ...

Option 3. Setting xsrfHeaderName in the call:

添加以下内容:

// ...
method: 'post',
url: '/api/data',
data: {...},
xsrfHeaderName: "X-CSRFToken",
// ...

然后在settings.py文件中,添加以下行:

CSRF_COOKIE_NAME = "XSRF-TOKEN"

Edit(June 10, 2017):User@yestema表示,它与Safari的工作原理略有不同[2]

Edit(April 17, 2019):User@GregHolst说上面的Safari解决方案对他不起作用.相反,他在MacOS Mojave上的Safari 12.1中使用了上述解决方案#3.(from comments)

Edit(February 17, 2019):您可能还需要设置[3]:

axios.defaults.withCredentials = true

我试过但没用的东西:1

Reactjs相关问答推荐

eslint -无法解析模块的路径@web3modal/ethers/react导入/no-unresolved

如何使用json将购物车数组传递到后台API

为什么Next.js 14无法解析页面路由路径?

react 路由GUGUD Use Effect无法通过useNavigate正常工作

如何使数据库数据在第一次呈现时显示?

当项目开始时,它不会从三元运算符(REACT)加载一些tailwind 类名称

用于获取带有事件处理程序的API的动态路由

使用自动播放的视频组件呈现登录页面时出现JEST测试错误

无法在下一个标头上使用 React hooks

React Todo List 应用程序我在实现删除功能时遇到问题

onClick 事件处理程序未应用于样式组件

无法通过 fetch 获取数据到上下文中

React-dom 的钩子调用无效.我能做些什么?

我收到Uncaught TypeError: props.handleSelect is not a function

虽然通过了身份认证,但并没有导航到请求的页面

当每个元素都可拖动时,移动设备上的滚动列表出现问题

如何使用 React Router 在 React 中正确同步 useEffect 和 useLocation 挂钩?

在 redux 工具包中使用 dispatch 发送多个操作

在视图列表上react 本机无限循环的反弹动画?

React中`onScroll`和`onScrollCapture`之间的区别?