导读：本篇文章首席CTO笔记来给大家介绍有关跨域请求django是如何处理的的相关内容，希望对大家有所帮助，一起来看看吧。
django和vue初次接触
因为要改一些以前的需求,主管让我学习一下vue,花了半天的时间算是入了门,就要拿成熟的项目去改,这个难度还是挺大的.
熟悉网站建设的人应该都知道vue是一个出色的前端框架,而django是python语言体系下的一个后端框架,虽然说他们两个都可以写出完整的网站,但是各有侧重点,django发开速度快,但是本身自带的模板引擎比较孱弱,而vue是以数据驱动和组件化的思想构建,在渲染页面方面实属一流,所以作为python开发者,有时候就会将这个两个框架结合起来,进行网站的开发.
不同的框架是如何结合在一起呢,这就引出了一个前后端分离的思想,后端只提供接口,api,,前端去调用这些接口,来拿数据,再渲染到html模板上
不同框架进行开发时,最大的问题就是跨域,由于框架不同,他们所启用的端口号是不同的,也就是不同的数据源,由于安全性,所以他们之间是不能直接访问的,解除方法是在django的配置文件中引入跨域许可的中间件,用Django的第三方包django-cors-headers来解决跨域问题
这样的话,我们就可以更方便的通过vue的启动方式来进行调试了
最后怎么整合到一起呢?我们知道django是通过指定模板和静态文件的路径来进行渲染的,所以,我们需要将vue文件打包,生成index主页面和静态文件,这样我们就可以把这两个分别放入django默认的文件夹下,或者重新指定路径就可以了.
解决携带身份信息的跨域请求
![Y$EL]}B8CA)OU{)L 6F3WFD.png
axios 中这样设置
当前端配置修改后请求跨域就会出现第一步的错误，这时候就需要在服务器端设置了。
（顺带一说，感谢我的后端小伙伴成少在这个寂寞的夜晚陪我搞到深夜）
现在的情况是只有前端同意跨域请求携带cookie了，而后端还没有同意。所以在后台配置中也设置一下就好了。
django中setting.py的配置
[图片上传失败...(image-90d7c0-1556455798141)]
记一次uwsgi导致的跨域问题
后台是NGINX+uwsgi+Django，配置了公司内网域名，但是每经过一段时间使用，便会出现接口报错，排查下来发现是接口跨域导致的报错
初期排查过程中已经确认过Django中已经配置了跨域，且是使用一段时间后才出现跨域，后发现当提示跨域错误时清理cookie会解决问题，遂逐一删除cookie内的测试是否因为某条cookie导致的跨域，最后发现是因为一条键值名为user的cookie导致的跨域，发现user对应的cookie长度为283，更改user值的长度也可以解决跨域问题，最终定位问题原因是因为cookie过长导致的跨域。
找到原因是cookie过长导致，剩下就是排查具体哪里配置导致的问题，首先查看服务接口调用日志发现浏览器报错情况下服务没有接口调用日志，中间排查过程中忽略了uwsgi的配置，导致一直在nginx相关配置中查找问题，一开始以为是nginx的buffer大小的设置问题，后来发现更改后问题依然存在，最终想到uwsgi的配置，最后发现是uwsgi的buffer-size默认是4k，最终调整为32k解决问题。
ajax跨域问题(python版本)
跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。即JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。
注意：localhost和127.0.0.1也属于跨域。
如果Origin指定的源不在许可范围内, 服务器会返回一个不带有Access-Control-Allow-Origin字段的响应 . 浏览器解析时发现缺少了这个字段, 就会报错.
修改Django中的views.py文件修改views.py中对应API的实现函数，给返回值加上响应头Access-Control-Allow-Origin，允许其他域通过Ajax请求数据：
满足以下两个条件的请求。
(1) 请求方法是以下三种方法之一：
(2) HTTP的头信息不超出以下几种字段：
非简单请求就是复杂请求。
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
预检请求为OPTIONS请求，用于向服务器请求权限信息的。
预检请求被成功响应后，才会发出真实请求，携带真实数据。
JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
JSONP的实现步骤大致如下(参考了来源中的文章)
请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容
这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。
JSONP使用注意
基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)。
前面讲了JSONP的实现原理，现在我们可以自己写JS来实现JSONP功能。
一般情况下，我们希望这个script标签能够动态的调用，而不是像固定在html里面所以没等页面显示就执行了，很不灵活。
我们可以通过页面的触发事件操作后，通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务。实例如下：
为了更加灵活，上述我们将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。
如上，jQuery框架也当然支持JSONP，可以使用 $.getJSON(url,[data],[callback]) 方法。
与js实现的方式相比，我们并不要自己生成一个script标签，客户端也并不需要自己定义一个回调函数.
上述这种方法，很方便，不需要我们自己定义回调函数和指定回调函数名，但是，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？
我们可以使用$.ajax方法来实现。如下例：
在上小节中jsonp: 'callbacks'就是定义一个存放回调函数的键，jsonpCallback是前端定义好的回调函数方法名，server端接受callback键对应值后就可以在其中填充数据打包返回。
但是，jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。
如此，我们的跨域处理即完成，支持所有的请求。
django-restful:与前端vue接口对接
category 与vue 接口对接
首先是需要把所有的category的内容取出来
由于前端vue展示category是分级的
一级 二级 三级 这样展示的
所以我们需要把三个内容都拿出来
但是首先需要取出第一级 然后第一级镶嵌了第二级，然后第二级镶嵌第三季 ，就跟上面goods中显示外键的category的内容一样
我们还是需要写serializer
这样就是一级 镶嵌二级 二级镶嵌三级
但是这里有一个问题不要搞错了 这三个类的位置不能弄错了
因为一级是调用二级 所以二级一定是先写好了的
所以二级一定在一级上面 同理 三级要在二级上面
然后就是view
在过滤中加上category_type = 1 这样就可以直接显示第一大类 然后第一大类中有第二小类 这样更有层次感 如果直接一下子全部取出来 就不好分辨了
同时我们还要处理取出某个单一的信息
所以 我们继承了mixins.RetrieveModelMixin 这个类，这是一个显示详情的类
例如显示某个动物园的某个动物那样
/zoos/id
这样的url
同样这样写了 我们就直接只配置category的url就够了
就不用考虑 后面的id是否还需要配置一个url 这些都不用考虑了，因为我们继承了 viewset这个类
这些问题他都帮我们解决了
这样处理我们后端就能看见了
但是这样处理了 前端对接时 会发现 无法显示
因为有一个跨域问题
这个问题前后端 都可以独自解决 这里学习的是后端，所以讲一下后端的做法
就是修改服务端
在github上搜索django-cors-headers就可以找到这个信息
同样里面介绍如何使用
安装
pip install django-cors-headers
然后settins中INSTALLED_APPS配置和settings中MIDDLEWARE配置
这里要注意 MIDDLEWARE配置中
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
这两个必须放在
'django.middleware.csrf.CsrfViewMiddleware',
这个的前面 不然会报错
同时还要配置
CORS_ORIGIN_ALLOW_ALL = True
允许跨域访问 它默认是False
这样前端就可以正常显示了
为什么会产生跨域访问
因为vue中api配置的中 我们调试数据 不可能把所有的host 都修改了 有一些是线上数据 我们调试的是本地的一部分数据 所以要重新定一个localhost
修改部分 host的链接
这样就导致了跨域 本身使用的是一个线上host端口，但是数据中有一部分是请求的是本地host端口 导致了跨域访问
django怎么解决跨域问题
1.安装django-cors-headers
pip install django-cors-headers
1
2.配置settings.py文件
INSTALLED_APPS = [
...
'corsheaders'，
...
]
MIDDLEWARE_CLASSES = (
...
'corsheaders.middleware.CorsMiddleware',
'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',
)
OK！问题解决！
结语：以上就是首席CTO笔记为大家介绍的关于跨域请求django是如何处理的的全部内容了，希望对大家有所帮助，如果你还想了解更多这方面的信息，记得收藏关注本站。