[axios/利用axios请求传递后端Django]

4 篇文章 0 订阅
1 篇文章 0 订阅
本文分享了使用React、Ant Design、React-Router、axios等前端技术结合后端框架Django实现前后端分离的经验。针对跨域问题、axios请求两次及数据格式差异等常见问题提供了详细的解决方案。
摘要由CSDN通过智能技术生成

最近在写项目,一直在钻研前端框架React 因为本人之前写项目都是用Django导致前后端不分离,当然,写的也很舒服,最近打算写一个新的项目,将前后端分离:

React+ Antd + React-Router + axios + Django

前端用组件化的React前端框架,UI界面用非常好用的基于React写的Antd蚂蚁金服的项目
后端是Pythonweb框架Django这样实现了 Django只作为接口,路由跳转,由React控制

由于之前ajax异步用的是 JQuery第一次用axios 导致踩了很多坑,接下来我把出现的问题给大家列出来以及解决办法:

  1. webpack开启项目和后端端口不一样 会出现跨域问题
  2. axios 会请求两次:第一次options会验证一些上传的东西
  3. 传给后端的数据格式是不一样的,并不是传统的application/x-www-form-urlencoded而是Request Payload形式传到后段的

问题一:

跨域问题,本地环境测试的话 就需要在``Django``做调整,如果是线上的话,直接在Nginx或者Apache添加头部信息就好,Django有一个专门解决跨域的包,这个非常的好

pip install django-cors-headers

配置settings.py文件

INSTALLED_APPS = [
    ...
    'corsheaders', #必须添加
    ...
 ] 

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware', #这个在common上面
    'django.middleware.common.CommonMiddleware', 
    ...
)
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    '*'
)

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

问题二:

第二个问题导致了 请求两次,第一次请求是``options``第二次才是 post,我们更改一下传输数据结构,引入axios自带的QS转换一下

import Qs from 'qs'

 var formData = this.props.form.getFieldsValue();
        console.log(formData)
        axios.post('http://localhost:8000/api/v1/register/',
        Qs.stringify( {                                #在这里将post数据转换为query
               username: formData.username,
               password: formData.password,
               repeat_password: formData.repeat_password
            }),    
        )
            .then((response) => {
               if (response.data.result.data.code == 200) {
                   message.success('注册成功!')
                   this.setModalVisible(false)
               } else {
                    message.error('输入有误!!')
               }
            })
            .catch((response) => {
                console.log(response)
            })

问题三:

虽然现在正常了,后端也能看到前端post过去的数据了,但是我发现数据格式还是有问题,他并不是传统的x-www,我们需要在axios header头里面更改数据类型
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}

完整的请求如下:

 axios.post('http://localhost:8000/api/v1/register/',
        Qs.stringify(  {
               username: formData.username,
               password: formData.password,
               repeat_password: formData.repeat_password
            }),
            {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
        )
            .then((response) => {
               if (response.data.result.data.code == 200) {
                   message.success('注册成功!')
                   this.setModalVisible(false)
               } else {
                    message.error('输入有误!!')
               }
            })
            .catch((response) => {
                console.log(response)
            })

    }

个人博客: https://igolang.cn

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值