碰到了两个问题

没有跨域问题的时候，post请求django端一直报找不到路径，
后来再调整（没什么调整看着），就开始get请求没有跨域问题，post请求就存在跨域问题：
post

嗯哼5071141 2022-02-24

源自：Vue实战开发慕旅游网的前端 3-2 跨域问题解决（下）

收起

1回答

好帮手慕燕燕 2022-02-25 10:57:53

同学，你好！

1、没有跨域问题时，post请求django端找不到路径，检查一下Django项目的urls.py文件中是否配置了login相关的路径

2、post请求时，错误信息提示"请求头Content-Type字段不被Access-Control-Allow-Headers允许"，解决方法：发送post请求时为请求头设置Content-Type类型

3、另外，还有一处错误提示，ajax.js第31行，提示没有定义statu，正确写法为status

祝：学习愉快！

收起回答

提问者嗯哼5071141 #1

老师：针对vue的web项目，我用的axios来发送post请求，在vue里怎么设置全局的csrf呀，vue设置后，django里面还需要设置么，这里设置好像不行
xport const ajax=axios.create({
headers:{
source:'h5',
'Content-Type':'application/json',
'X-CSRFtoken':csrf_token(),
},
// transformRequest:function(data,headers){
// return qs.stringify(data)
// },
// 携带上次使用的cookies
withCredentials:true,
timeout : 5000

}
)

2022-02-25 15:46:48

好帮手慕燕燕回复提问者嗯哼5071141 #2

同学，你好！Django也需要对csrf_token进行处理，axios可以先通过get方法获取csrf_token的值，然后缓存起来，之后每次发起post请求时，将获取到的csrf_token值携带上，可参考以下代码

1、在django中创建一个获取csrf_token的视图函数

from django.middleware.csrf import get_token
def get_csrf_token(request):
    csrf_token = get_token(request)  # 获取csrf_token的值
    return json_response(data={'token': csrf_token})

2、前端先通过get的方式把csrf_token获取到，缓存起来，然后再发送post请求

import axios from 'axios'

// 获取csrf_token
axios.get('/api/home/token/').then(res => {
  const csrftoken = res.data.data.token
  window.sessionStorage.setItem('csrf_token', csrftoken)
})

// post请求，配置请求头
axios({
  url: '/api/auth/login/',
  method: 'post',
  data: {
    username: xxx,
    passwd: xxx
  },
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'X-CSRFToken': window.sessionStorage.getItem('csrf_token')
  }
})

祝：学习愉快！

2022-02-25 17:31:13