跨域访问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. 开发中你不得不知的一个Git小技巧

    一. 背景 在工作中大家应会碰到需要频繁在两个分支中切换工作的情况,我们通常做法是利用git stash命令暂存当前工作区中的变更,然后git checkout到目标分支中工作,工作完成后回到刚刚分支 ...

  2. 安装centos7模板机[正常版]

    1. 安装centos 7模板机 准备好centos7的镜像 下载地址:http://mirrors.aliyun.com/centos/7/isos/x86_64/ 安装centos 自定义硬件: ...

  3. HMI-Board上手指南

    介绍 HMI-Board为 RT-Thread 联合瑞萨推出的高性价比图形评估套件,取代传统的 HMI+主控板硬件,一套硬件即可实现 HMI+IoT+控制的全套能力.依托于瑞萨高性能芯片 RA6M3 ...

  4. c语言不可不说的一件事——进制之间的转化

    进制之间的转换 二进制转换 二进制转换为十进制 10111010.101 转换方法: 个位数是乘以2的0次方 从小数点开始分割,(小数点前从右往左,小数点后从左往右)乘以2的对应次方(从0开始取),最 ...

  5. .NET周刊【6月第1期 2024-06-02】

    国内文章 一文带你了解.NET能做什么? https://www.cnblogs.com/Can-daydayup/p/18214473 .NET是一个免费.开源.跨平台的开发平台框架,广泛应用于桌面 ...

  6. vant做城市列表

    vant: https://youzan.github.io/vant/#/zh-CN/ 安装 cnpm i -S vant 按需加载配置 # 在 babel.config.js 中配置 module ...

  7. Nodejs中间件 中间件分类和自定义中间件

    中间件 中间件理解 中间件可以理解为业务流程的中间处理环节.如生活中吃一般炒青菜,大约分为如下几步骤 express中当一个请求到达的服务器之后,可以在给客户响应之前连续调用多个中间件,来对本次请求和 ...

  8. C#.NET HTTP Request 跳过自签名证书校验。

    public static bool CheckValidationResult(object sender, X509Certificate certificate, X509Chain chain ...

  9. 使用 Promise.withResolvers() 来简化你将函数 Promise 化的实现~~

    引言 在JavaScript编程中,Promise 是一种处理异步操作的常用机制.Promise 对象代表了一个尚未完成但预期将来会完成的操作的结果.在本文中,我们将探讨如何通过使用 ES2024 的 ...

  10. windows nexus-3.20安装

    1.Nexus官网:https://www.sonatype.com/download-oss-sonatype 2.环境变量NEXUS_HOME = D:\nexus-3.20.1-01-win64 ...