跨域访问POST请求需预先发送option请求问题处理方案

 

By:授客 QQ:103355122

实践环境

Win 10

Python 3.5.4

Django-2.0.13.tar.gz

官方下载地址:

https://www.djangoproject.com/download/2.0.13/tarball/

问题描述

使用POST请求访问Django后端API时自动先发送option请求,然后才执行POST请求

原因分析

跨域资源共享(CORS)机制导致。

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

只要同时满足以下两大条件,就属于简单请求,否则就是非简单请求。

1、请求方法是以下三种方法之一:

HEAD

GET

POST

2、HTTP的头信息不超出以下几种字段:

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type(其值只限于application/x-www-form-urlencoded、multipart/form-data、text/plain)

当请求存在跨域资源共享(CORS),并且是非简单请求,就会触发CORS的预检请求(preflight);"预检"请求用的请求方法是OPTIONS,如果请求OK,才会再次发送目标操作请求。

实际开发过程中,后台采用token检验机制,前台发送请求必须将token放到Request Header中,那么就需要传输自定义Header信息、或则请求头中的Content-Type设置为"application/json",就会形成非简单请求。 但是很多时候,我们并不希望浏览器这么做,重复的请求,一方面是增加服务器压力,另一方面,相当于增加了请求响应时间。

解决方法 

一种比较合适的解决方法就是增加响应头“Access-Control-Max-Age”来控制浏览器在多长时间内(单位为秒)无需在请求时发送预检请求,从而减少不必要的预检请求。

中间件代码如下:

#!/usr/bin/env python
# -*- coding:utf-8 -*- __author__ = '授客' from django.utils.deprecation import MiddlewareMixin class PublicAccessControlMiddleware(MiddlewareMixin):
def process_request(self, request):
pass def process_response(self, request, response):
response['Access-Control-Max-Age'] = 86400 #3600*24h = 86400秒,即告诉浏览器,缓存预检结果24小时,即针对同一URL请求,发送第一个OPTION请求往后24小时内不再发送OPTION请求。
return response

  

参考链接

https://juejin.im/post/5c889e136fb9a049d37ff768

Django 跨域访问POST请求需预先发送option请求问题处理方案的更多相关文章

  1. nginx实现跨域访问并支持(GET, POST,PUT,DELETE, OPTIONS)

    最近有同事提出在使用客户端跨域访问的时候,发现服务器对option请求返回了403,后来查看了网络添加了一段配置,发现option服务返回204了,但是后续的put操作也直接返回了204导致无法使用图 ...

  2. IIS下设置跨域访问问题--Access-Control-Allow-Origin 站点跨域请求的问题

    背景: 最近 开发中遇到新需求,把公司的OA系统迁移一套到小程序上面去 有些功能的信息是在小程序 查看 但是文件是在pc端上传的 例如:领导在外出办公 使用小程序查看xxxx.pdf文件  这个时候就 ...

  3. 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示

    随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是 ...

  4. ajax 设置Access-Control-Allow-Origin实现跨域访问

    ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jquery的jsonp方法,t ...

  5. ajax实现跨域访问

    ajax跨域访问是一个老生畅谈的问题啦,网上解决方法很多,discuz用的p3p协议,有兴趣的朋友可以了解下,比较常用的是JSONP方法,貌似目前这种方法只支持GET方式,不如POST方式安全. 即使 ...

  6. SpringBoot 实现前后端分离的跨域访问(CORS)

    序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...

  7. Access-Control-Allow-Origin实现跨域访问 跨域

    总结:跨域的get,post请求 后台可以设置 Access-Control-*相关的参数,让浏览器支持. // 指定允许其他域名访问 header('Access-Control-Allow-Ori ...

  8. ajax 跨域访问 :Access-Control-Allow-Origin

    一说到ajax跨域.首先想到的就是jsonp  . JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jQuery的jsonp方法,type设为POST,也 ...

  9. ajax设置Access-Control-Allow-Origin实现跨域访问

    ajax跨域访问 1.jsonp方法,jsonp方法是一种非官方方法,这种方法只支持GET方式, 不如POST方式安全.(即使使用jquery的jsonp方法,type设为POST, 也会自动变为GE ...

  10. 使用jsonp进行跨域访问

    一.使用场景 当我们请求非本服务器的资源的时候,浏览器会禁止访问,并提示不允许跨域访问.此时我们可以使用jsonp这种请求方式,从其他服务器获取资源.在客户端调用提供jsonp支持的接口,获取json ...

随机推荐

  1. 一文搞懂 MySQL 日志

    前言 MySQL 的日志记录了运行的各种信息,是 MySQL 事务.性能.数据容灾.异常排查等的基础.本文将介绍 MySQL 一些关键日志的作用和原理. MySQL InnoDB 引擎重要的三个日志: ...

  2. 《iOS面试之道》-“串行队列的代码实战” 勘误

    一.原书第一版154页开始讲解串行队列.并发队列.以及在Dispatch_Async.Dispatch_Sync下面的作用 最后一段代码: if(_q == NULL) { _q = dispatch ...

  3. Vue渲染函数与JSX指南

    title: Vue渲染函数与JSX指南 date: 2024/6/3 下午6:43:53 updated: 2024/6/3 下午6:43:53 categories: 前端开发 tags: Vue ...

  4. 为何Mysql数据库上读和代码读取的数据不一致

    上周,做了一个同步删除的功能,具体流程是,数据库删除-->调用第三方运行删除接口,同步删除. 具体流程 数据库删除数据后,这里使用标志删除,再调用第三方数据. 在调用第三方数据之前需要通过id查 ...

  5. LeetCode 449. Serialize and Deserialize BST 序列化和反序列化二叉搜索树 (Java)

    题目: Serialization is the process of converting a data structure or object into a sequence of bits so ...

  6. kettle从入门到精通 第六十七课 ETL之kettle 再谈kettle阻塞,阻塞多个分支的多个步骤

    场景:ETL沟通交流群内有小伙伴反馈,如何多个分支处理完毕之后记录下同步结果呢?或者是调用后续步骤.存储过程.三方接口等. 解决:使用步骤Blocking step进行阻塞处理即可. 1. 如下流程图 ...

  7. Javascript高级程序设计第一章 | ch1 | 阅读笔记

    什么是JavaScript 历史回顾 JavaScript实现 完整的JavaScript实现包括 核心 ECMAScript -> 语法.类型.关键字.保留字...(规范) 文档对象模型 DO ...

  8. java线程的park unpark方法

    标签(空格分隔): 多线程 park 和 unpark的使用 park和unpark并不是线程的方法,而是LockSupport的静态方法 暂停当前线程 LockSupport.park();//所在 ...

  9. 2020年你不可不知的自动化框架,可替代Selenuim的测试框架Top10

    Selenium是一种开源自动测试工具.它可以跨不同的浏览器和平台在Web应用程序上执行功能,回归,负载测试.Slenium是最好的工具之一,但确实有一些缺点. 业界有一些强大的工具可以替代Selen ...

  10. uni-app apple store 上传新版本审核被拒绝 Guideline 5.1.1

    - Legal - Privacy - Data Collection and Storage We noticed that your app requests the user's consent ...