Django跨域资源共享问题(推荐)

最近做了一个前后端分离的web项目，其中我司职后端，使用django框架。在前后端集成测试的时候，就遇到了一些web安全相关的问题，cors跨域资源共享就是其中之一。

cors问题介绍

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。 CORS机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。现代浏览器支持在API容器中使用CORS，以降低跨域 HTTP 请求所带来的风险。

一个域是由协议、主机和端口号组成的，简单地说，当两个url的协议、主机和端口中存在一个不同时，它们属于不同域，那么它们之间的互相访问就会产生跨域访问问题。

我的项目中，前端的地址是 http://localhost:8001 ,后端的地址是 http://localhost:8000 ,两个地址的协议和主机都相同，但是端口号不同，因此，前端调用后端接口时，就会产生跨域访问的问题。

简单请求

简单请求不会触发跨域访问中的预检请求，满足下列条件的为简单请求:

使用下列方法之一

GET
HEAD
POST

headers字段集合主要包含以下类型：

  • Accept
  • Accept-Language
  • Content-Language
  • Content-type : text/plain 、 multipart/form-data 和 application/x-www-form-urlencoded
  • DRP
  • DownLink
  • Save-Data
  • Viewport-Width
  • Width

非简单请求

非简单请求即不满足简单请求条件的请求。非简单请求在发出请求前需要先发送一个预检请求，请求方法为 OPTIONS 方法。预检请求的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。 当请求满足下述任一条件时，即应首先发送预检请求：

使用了以下的HTTP方法:

PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH

首部字段里面包含了非简单请求的头部字段的字段

django中遇到的问题

在后台开发中，就遇到了这样的情况

错误提示中显示，请求被 CORS 协议阻拦。

这里的 Origin 字段说明了请求源地址，采用了 OPTIONS 方法，然后发出请求的地址 Host
就是本机地址。下面是服务器的响应，但是没有发出实际请求

然后，为了解决这一问题，我搜索过后，安装了django-cors-headers库，并且进行了配置，这里配置时我把django-cors-headers中间件放在了中间件第一位。再次访问同样的地址，结果如下：

1.首先，浏览器检测访问的请求头中的字段，存在对 CORS 安全的首部字段集合之外的字段，所以，向服务器发送一个预检请求。上图可见，方法为 OPTIONS ，该方法不会对服务器资源产生影响。其中的请求头中的 Access-Control-Request-Method 字段表明实际请求会采用 GET 方法， Origin 表示请求源，会在服务器中接受验证。

2.验证通过后，会在 response 请求头添加不同的字段进行返回， 字段的意思如下：

  • 首部字段 Access-Control-Allow-Headers ：表示服务器允许的头部字段。
  • 首部字段 Access-Control-Allow-Methods ：表明服务器允许客户端使用 POST , GET 和 OPTIONS 等等方法发起请求。
  • 首部字段 Access-Control-Allow-Origin ：表示服务器允许的请求源。
  • 首部字段 Access-Control-Max-Age :表明该响应的有效时间为86400秒，也就是24 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。

3.然后，客户端会发出实际请求，从结果上来看，预检请求的 response 请求体中没有任何信息，而实际请求则携带了服务器返回的信息。不难看出，预检请求确实就是与服务器提前沟通，获取与服务器相关信息的。

简单的总结

非简单请求需要发送预检请求进行判断，然后服务端与客户端需要在头部字段上达成一致，这样才能正常访问。不过，在django的开发中，直接使用django-cors-headers库以后，只需要简单的配置就能够很好的解决问题。

到此这篇关于Django跨域资源共享问题小结的文章就介绍到这了,更多相关django跨域资源共享内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Django解决ajax跨域访问问题

    详解Django解决ajax跨域访问问题

    这篇文章主要给大家介绍了关于Django跨域请求问题解决的相关资料,文中介绍的实现方法包括:使用django-cors-headers全局控制.使用JsonP,只能用于Get方法以及在views.py里设置响应头,只能控制单个接口,需要的朋友可以参考下. 使用Django在服务器端写了一个API,返回一个JSON数据.使用Ajax调用该API: 但是,Chrome浏览器提示错误: No 'Access-Control-Allow-Origin' header is present on the

  • Django 跨域请求处理的示例代码

    django处理Ajax跨域访问 使用javascript进行ajax访问的时候,出现如下错误 出错原因:javascript处于安全考虑,不允许跨域访问.下图是对跨域访问的解释: 概念: 这里说的js跨域是指通过js或python在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(Django)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 解决办法 1. 修改views.py文件 修改views.py中对应API的实

  • django基于cors解决跨域请求问题详解

    一 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名:127.0.0.1:8001一段数据 浏览器上就会报错,这个就是同源策略的保护,如果浏览器对javas

  • Python的Django应用程序解决AJAX跨域访问问题的方法

    引子 使用Django在服务器端写了一个API,返回一个JSON数据.使用Ajax调用该API: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width

  • Django+uni-app实现数据通信中的请求跨域的示例代码

    前后端分离的模式下,后端使用Django RestFramework,前端使用uni-app来进行APP的开发. 前端代码: Django后端跨域配置 settings.py配置文件中添加: INSTALLED_APPS = [ 'corsheaders', ] 中间件中添加 'corsheaders.middleware.CorsMiddleware', # 注意顺序 一定是在common中间件的前面 MIDDLEWARE = [ # 'accounts.MyCsrfMiddleware.CO

  • Django跨域请求问题的解决方法示例

    前言 本文主要给大家介绍了关于Django跨域请求问题解决的几种方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 几种方法: 使用django-cors-headers全局控制 使用JsonP,只能用于Get方法 在views.py里设置响应头,只能控制单个接口 django-cors-headers 首先安装 pip install django-cors-headers 然后在settings.py里配置一番就可以 INSTALLED_APPS = [ ... 'cor

  • Django+Vue跨域环境配置详解

    概述 在使用Django+Vue开发过程中,遇到了很多开发环境相关的问题,比如跨域,比如ajax请求参数等,本篇文章主要记录解决在开发过程中,遇到的一些问题. 跨域不带Cookie 在使用Vue脚手架开发的过程中,会使用Vue脚手架自带的Server进行项目调试,Vue自带的Server支持 hot reloading ,这个特性是非常好用的.但是在开发过程中,因为要与后端交互,所以在请求后端接口的时候,会遇到跨域问题,这个问题在一些职责划分清楚的团队并不存在,因为前端开发人员会才用Mock数据

  • Django跨域资源共享问题(推荐)

    最近做了一个前后端分离的web项目,其中我司职后端,使用django框架.在前后端集成测试的时候,就遇到了一些web安全相关的问题,cors跨域资源共享就是其中之一. cors问题介绍 跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源.当一个资源从与该资源本身所在的服务器不同的域.协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求. CORS机制允许 Web

  • Django跨域请求原理及实现代码

    一 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名:127.0.0.1:8001一段数据 浏览器上就会报错,个就是同源策略的保护,如果浏览器对javasc

  • js跨域资源共享 基础篇

    本文详细介绍了javascript跨域资源共享,供大家参考,具体内容如下 1.为什么提出跨域资源共享(CORS)?     因为XHR实现ajax的安全限制是:XHR 对象只能访问与包含它的页面位于同一个域中的资源 2.如何实现跨域?(跨浏览器) // 跨浏览器创建并返回CORS对象 // param method : 请求的方式, get or post // param url : 跨域请求的url // return xhr : 返回的跨域资源对象 function createCORSR

  • 浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

    浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

    由于同源策略的缘故,ajax不能向不同域的网站发出请求. 比如a站localhost需要向b站请求数据,地址为:http://www.walk-sing.com/api.php 请求的代码如下: <html> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $.get

  • 你可能不知道的CORS跨域资源共享

    你可能不知道的CORS跨域资源共享

    什么是CORS? 默认情况下,为预防某些而已行为,浏览器的XHR对象只能访问来源于同一个域中的资源.但是我们在日常实际开发中,常常会遇到跨域请求的需求,因此就出现了一种跨域请求的方案:CORS(Cross-Origin Resource Sharing)跨域资源共享. CORS背后的原理是:使用自定的HTTP头部与服务器进行沟通,从而由服务器决定响应是否成功. 了解下同源策略 源(origin)*:就是协议.域名和端口号: 同源: 就是源相同,即协议.域名和端口完全相同: 同源策略:同源策略是浏

  • pycharm + django跨域无提示的解决方法

    pycharm + django跨域无提示的解决方法

    如何解决pycharm配置跨域不提示? 正常我们需在在如上中间件内配置跨域,但是2019之前的版本配置中间件可能需要全部自己敲出来,不会有提示,那我们不妨换个位置试试 在TEMPLATES模板的最后一行(如上图位置所示)编写跨域的中间件会出现完整提示,如若提示不准确,可多打几个单词,以更准确的提示全部中间件配置 然后按住Ctrl 鼠标左键单击CorsMiddleware,就会跳转到底层文件 然后就可以找到如上图所示的配置允许所有源访问的代码,只需复制以后放在文件的最下方(个人习惯)然后后面加上=

  • Django跨域请求CSRF的方法示例

    web跨域请求 1.为什么要有跨域限制 举个例子: 1.用户登录了自己的银行页面 http://mybank.com,http://mybank.com向用户的cookie中添加用户标识. 2.用户浏览了恶意页面 http://evil.com.执行了页面中的恶意AJAX请求代码. 3.http://evil.com向http://mybank.com发起AJAX HTTP请求,请求会默认把http://mybank.com对应cookie也同时发送过去. 4.银行页面从发送的cookie中提取

  • Django跨域请求无法传递Cookie的解决

    Django跨域请求无法传递Cookie的解决

    问题 在使用 Django + Vue 进行前后端分离开发时,发现在跨域访问情况下,后台 HttpResponse 在使用 set_cookie 方法后,浏览器无法获取 Cookie. 解决方法 Django 端使用 django-cors-headers 解决跨域问题,修改 settings.py 文件. 具体方案: Flask和Django中解决跨域请求问题 对 axios 进行设置,允许浏览器设置或获取Cookie. axios.defaults.withCredentials = tru

随机推荐