前端发送来的axios请求信息

this.$axios.request({
  url:'http://127.0.0.1:8001/pay/shoppingcar/',
  method:'post',
  headers:{
    authenticate:'a073b3dabbb140e8b9d28debb6a356a1'  # 自定义的请求头部信息键值对,
  },  # 接上,这种key也算是一种请求头,需要加入django中间件内豁免的头部信息内.
  data:{
    course_id:course_id,
    price_policy_id:price_policy_id
  }
}).then(function (data) {
  if(data.status==200){alert('加入购物车成功')}
})

针对以上这种带有自定义头部信息的复杂请求,需要在认证内判断请求是否是预检的options请求,如果是

则直接return None,后续的几个组件内会把它作为匿名用户处理,然后进入源码中的options视图内返回,

返回的对象在经过中间件的procee_response时,给它的头部信息加入要豁免的请求头.

认证组件内authenticate方法中加入以下代码:

if request.method=='OPTIONS':
    return None

中间件中代码加头部信息中自定义的key: 如下:

response["Access-Control-Allow-Headers"] = "Content-Type, AUTHENTICATE "  # 内容类型

axios发送自定义请求头的跨域解决的更多相关文章

  1. Angular2发送HTTP请求SpringBoot后台跨域问题解决

    Angular通过http发送post请求至SpringBoot的Controller,由于同源策略的保护,遇到跨域问题: • 源(origin)就是协议(http).域名(localhost)和端口 ...

  2. axios的数据请求方式及跨域

    express 的三大功能:静态资源.路由.模板引擎 app.use(express.static('www')); 只要是创建这个静态的目录,这个 www 的静态目录里面的文件就可以被访问 数据的请 ...

  3. Tornado—添加请求头允许跨域请求访问

    跨域请求访问 如果是前后端分离,那就肯定会遇到cros跨域请求难题,可以设置一个BaseHandler,然后继承即可. class BaseHandler(tornado.web.RequestHan ...

  4. vue使用axios发送post请求时的坑及解决原理

    前言:在做项目的时候正好同事碰到了这个问题,问为什么用axios在发送请求的时候没有成功,请求不到数据,反而是报错了,下图就是报错请求本尊 vue里代码如下: this.$http.post('/ge ...

  5. 终于明白了vue使用axios发送post请求时的坑及解决原理

    前言:在做项目的时候正好同事碰到了这个问题,问为什么用axios在发送请求的时候没有成功,请求不到数据,反而是报错了,下图就是报错请求本尊 vue里代码如下: this.$http.post('/ge ...

  6. vue 解决axios请求出现前端跨域问题

    vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...

  7. javascript 跨域请求详细分析(终极跨域解决办法)

    自从我接触前端以来,接手的项目里面很大部分都是前后端分离的,后端只提供接口,前端根据后端接口渲染出实际页面.个人觉得这是一个挺好的模式,前后端各自负责各自的模块,分工明确,而且也给前端更大的发挥空间. ...

  8. 客户端ajax请求为实现Token验证添加headers后导致正常请求变为options跨域请求解决方法

    客户端为了实现token认证,通过Jquery的ajaxSetup方法全局配置headers: 全局配置headers后会导致部分不需要token认证的请求变为options请求,导致跨域访问.报错信 ...

  9. Axios发送AJAX请求

    目录 Axios 特征 axios提供主要三种发起请求的方式 方式一:直接axios实例直接call方式 方式二:通过axios实例提供的不同http请求方式的方法 方式三:其实是从第二种方式中单独提 ...

随机推荐

  1. C++:const

    const const是C++提供的一个强大的关键字,const的用法非常多,但总的来说,const的作用只有一个:保证被修饰的内容不会被程序所修改. const基本用法 对一个类型的对象使用cons ...

  2. c++小学期大作业攻略(三)用户系统

    Update at 2019/07/22 14:16 发现一个大坑,我们后期是打算用QSS统一堆样式进行美化的,于是我把之前对QLabel进行的setAlignment全部去掉了,打算统一丢进Qss里 ...

  3. Navicat MYSQL 建立关联表 保存时遇到 cannot add foreign key constraint

    首先建立user表,如下图 然后建立message表,userid用作外键,关联user表的id 点击上面的外键按钮,添加外键如下 结果保存时报错: cannot add foreign key co ...

  4. js中的方法如何传入多个参数

    js中的方法如何传入多个参数 $(function () { let parameter1 = 1; let parameter2 = 'Hello World'; let parameter3 = ...

  5. C++分治策略实现二分搜索

    问题描述: 给定已排好序的n个元素组成的数组,现要利用二分搜索算法判断特定元素x是否在该有序数组中. 细节须知: (1)由于可能需要对分治策略实现二分搜索的算法效率进行评估,故使用大量的随机数对算法进 ...

  6. Git基础和入门

    一.Git基础概念 Git功能简单概述 可以随时回滚到之前的代码版本(git reset --hard ): 协同开发时不会覆盖别人的代码(分支): 留下修改记录(git log): 发版时可以方便的 ...

  7. QML官方文档:Qt Quick Controls 1和2对比

    Qt Quick Controls有1和2两个版本,在程序中会看到好多1和2版本混合使用的情况. 原文:https://doc.qt.io/qt-5/qtquickcontrols2-differen ...

  8. uni-app项目记录

    1.如何定义一个全局属性 在App.vue 文件中,以 global.属性名= XXX; 定义 在其他页面就以 global.属性名来调用 或者在min.js 中使用 Vue.prototype 挂载 ...

  9. h5和native测试时的区别

    我们以往的APP是使用原生系统内核的,相当于直接在系统上操作,是我们传统意义上的软件,更加稳定 H5的APP先得调用系统的浏览器内核,相当于是在网页中进行操作,较原生APP稳定性稍差,似乎还没有百万级 ...

  10. flink 实现ConnectedComponents 连通分量,增量迭代算法(Delta Iteration)实现详解

    1.连通分量是什么? 首先需要了解什么是连通图.无向连通图.极大连通子图等概念,这些概念都来自数据结构-图,这里简单介绍一下. 下图是连通图和非连通图,都是无向的,这里不扩展有向图: 连通分量(con ...