redux 用于Django POST请求的Fetch API

epggiuax  于 2023-10-19  发布在  Go
关注(0)|答案(1)|浏览(107)

我正在尝试从React/Redux/Django webapp中删除jQuery,并将$.ajax方法替换为Fetch API。我或多或少让我所有的GET请求工作正常,我似乎能够击中我的POST请求,但我似乎不能格式化我的请求,以便实际将我的POST数据放入Django request.POST对象。每次我点击/sign_in视图时,request.POST对象都是空的。我的整个应用程序的后端都是使用Django表单构建的(没有Django模板,只是React控制的组件),我真的不想重写我所有的视图来使用request.bodyrequest.data
以下是我认为相关的所有代码,如果有更多有用的,请告诉我:

这是我用来构建完整POST数据并附加CSRF令牌的curried函数:

const setUpCsrfToken = () => {
  const csrftoken = Cookies.get('csrftoken')

  return function post (url, options) {
  const defaults = {
    'method': 'POST',
    'credentials': 'include',
    'headers': {
      'X-CSRFToken': csrftoken,
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }

  const merged = merge(options, defaults)
  return fetch(url, merged)
  }
}

export const post = setUpCsrfToken()

这是我在React应用中使用的API方法:

export const signIn = data => {
  return post('/api/account/sign_in/', data)
}

数据最初打包在React应用程序本身时,就像一个带有字符串值的对象一样简单:

{
    email: '[email protected]',
    password: 'password
}

我看了这些问题,发现它们在名义上是有帮助的,但我不能为自己综合一个答案,考虑到我假设的Django的一些复杂性:

谢谢你,谢谢

pgky5nke

pgky5nke1#

您必须设置适当的X-Requested-With头。jQuery在引擎盖下做到了这一点。

X-Requested-With: XMLHttpRequest

所以,在你的例子中,你会想要这样的东西:

const setUpCsrfToken = () => {
  const csrftoken = Cookies.get('csrftoken')

  return function post (url, options) {
    const defaults = {
      'method': 'POST',
      'credentials': 'include',
      'headers': new Headers({
        'X-CSRFToken': csrftoken,
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        'X-Requested-With': 'XMLHttpRequest'
      })
    }

    const merged = merge(options, defaults)
    return fetch(url, merged)
  }
}

相关问题