跨域就是跨域名,跨端口

- 为什么会有跨域?

  浏览器有同源限制策略

- 绕过浏览器同源策略就可以跨域

  -  方式一: jsonp(利用浏览器特性)

     在html动态创建script标签

     同源策略会阻止ajax请求,但不阻止具有src属性的标签

     <script src='xxx'></script>

     <img src='xxx' />

  - 方式二: cors(硬刚)

     添加中间件设置cors

      

class MiddlewareMixin:
def __init__(self, get_response=None):
self.get_response = get_response
super().__init__() def __call__(self, request):
response = None
if hasattr(self, 'process_request'):
response = self.process_request(request)
response = response or self.get_response(request)
if hasattr(self, 'process_response'):
response = self.process_response(request, response)
return response class CORSMiddleware(MiddlewareMixin): def process_response(self,request,response):
# 允许你的域名来获取的我数据 response["Access-Control-Allow-Origin"] = "*" return response

简单请求  复杂请求

1、请求方式:HEAD、GET、POST
2、请求头信息:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type 对应的值是以下三个中的任意一个
application/x-www-form-urlencoded
multipart/form-data
text/plain

注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求

  

简单请求和非简单请求的区别

  简单请求:一次请求

  复杂请求:两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求

  

- 请求方式:OPTIONS
- "预检"其实做检查,检查如果通过则允许传输数据,检查不通过则不再发送真正想要发送的消息
- 如何"预检"
=> 如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则"预检"不通过
Access-Control-Request-Method
=> 如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则"预检"不通过
Access-Control-Request-Headers text/plain

关于预检

class CORSMiddleware(MiddlewareMixin):

    def process_response(self,request,response):
# 允许你的域名来获取的我数据
# response["Access-Control-Allow-Origin"] = "*" # 允许你携带Content-Type请求头
# response["Access-Control-Allow-Headers"] = "Content-Type" # 允许你发送DELETE,PUT
# response["access_Control-Allow-Methods"] = "DELETE,PUT" if request.method == 'OPTIONS':
response["Access-Control-Allow-Headers"] = "Content-Type" return response

实例

DRF跨域,简单请求和复杂请求的更多相关文章

  1. python 全栈开发,Day100(restful 接口,DRF组件,DRF跨域(cors组件))

    昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确.方便快速开发 - 针对pc,手机,ipad,微信,支付宝... 使用同一个接口 2. 简述http协议? - 基 ...

  2. ajax跨域简单请求与复杂请求

    开发网站时经常会用到跨域资源共享(简称cors,后面使用简称)来解决跨域问题,但是在使用cors的时候,http请求会被划分为两类,简单请求和复杂请求,而这两种请求的区别主要在于是否会触发cors预检 ...

  3. 原创:【ajax | axios跨域简单请求+复杂请求】自定义header头Token请求Laravel5后台【亲测可用】

    如标题:我想在ajax的header头增加自定义Token进行跨域api认证并调用,api使用laravel5编写,如何实现? 首先,了解下CORS简单请求和复杂请求.  -- CORS简单请求 -- ...

  4. 跨域时发送预检请求,tp5的restful无options方法的解决方案

    解决 跨域问题解决 问题:使用vue-resource发送delete请求时报options请求404 思考:明明发送的是delete请求,为何变成了options请求? 答:跨域情况下,PUT,DE ...

  5. vue 跨域配置代理 get/post 请求

    1.第一步要有 axios 插件 : npm i axios 首先要在自己的项目手动添加一个文件 vue.config.js 个人理解的为 这是axios 封装的跨域文件. 2.vue.config. ...

  6. vue-cli axios跨域 + 反向代理模拟http请求host+referer

    axios跨域 配置config->index.js中的proxyTable,内容如下: proxyTable: { // 跨域请求 '/api': { // 注意此处可设置为 '*' 代表不限 ...

  7. 聊一聊跨域,Vue向Django请求数据的一些问题

    1.做前后端分离 前端使用Vue程序,后端使用Django配合rest-framework. 那么前端Vue通过API接口拿到数据会出现跨域的问题,JSONP只是在get中会用到的,所以这里使用cor ...

  8. jsonp跨域简单应用(一)

    转载:http://www.cnblogs.com/cyg17173/p/5865364.html ashx+jsonp+document.referrer   -- 一年前学的JSONP 跨域,一年 ...

  9. ajax跨域POST时执行OPTIONS请求服务端返回403forbidden的解决方法

    ajax访问服务端restful api时,由于contentType类型的原因,浏览器会先发送OPTIONS请求. 本人服务端用的是spring mvc框架,web服务器用的是tomcat的,以下给 ...

随机推荐

  1. 详解 ESLint 规则,规范你的代码

    在很久之前就想通过工具来规范自己的代码风格,减少程序出错的概率,如果看过我的 一个前端程序猿的Sublime Text3的自我修养 ,这篇博客的朋友,肯定知道在当时我使用 SublimeLinter- ...

  2. Easyui-textbox得到焦点方法

    得到焦点是我们在编写前台时经常使用到的,为了提高用户的体验度,话不多说直接上代码. jsp页面: <div class="box_xian"> <span cla ...

  3. Ashampoo Driver Updater - 阿香婆驱动安装

    Ashampoo Driver Updater 让系统更完美 – 永远有最新的驱动,出错或旧的驱动是每个电脑系统的恶梦.时不时,驱动会丢失或不可避免的过时.Ashampoo Driver Update ...

  4. vue规格新增一对多的例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. agc023C - Painting Machines(组合数)

    题意 题目链接 有\(n\)个位置,每次你需要以\(1 \sim n-1\)的一个排列的顺序去染每一个颜色,第\(i\)个数可以把\(i\)和\(i+1\)位置染成黑色.一个排列的价值为最早把所有位置 ...

  6. 【代码笔记】Web-ionic 网格(Grid)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  7. 【读书笔记】iOS-iCloud文件备份

    iOS应用在运行时经常要创建一些文件,不过这些文件要如何存放呢?有没有什么要求呢? 由于手机资源空间有限而且考虑到Apple推出的iCloud,我们确实要对创建出的文件按照作用的不同,分出几种类别出来 ...

  8. puppeteer入门

    转自: https://www.jianshu.com/p/a89d8d6c007b 作者: ppCode puppeteer新手入门(chromium下载跳坑) ppCode 关注 2017.12. ...

  9. [20171120]理解v$session的state字段(11G).txt

    [20171120]理解v$session的state字段(11G).txt --//https://blogs.oracle.com/database4cn/vsession-%e4%bd%a0%e ...

  10. Pycharm2017常用快捷键

    Pycharm 的快捷键可以在[文件]-[设置]中自定义(见上图). 下方是根据网上资料整理的官方默认快捷键设置. 常用快捷键 Ctrl + / 行注释/取消行注释 Tab / Shift + Tab ...