Django实现跨域请求过程详解

前言

CORS 即 Cross Origin Resource Sharing 跨域资源共享.

跨域请求分两种：简单请求、复杂请求.

简单请求

简单请求必须满足下述条件.

HTTP方法为这三种方法之一：HEAD、GET、POST

HTTP头消息不超出以下字段：

Accept、Accept-Language、Content-Language、Last-Event-ID

且Content-Type只能为下列类型中的某一个：

  • application/x-www-from-urlencoded
  • multipart/form-data
  • text/plain.

==任何不满足上述要求的请求，都会被认为是复杂请求.

复杂请求会先发出一个预请求——预检，OPTIONS请求.==

浏览器的同源策略

无法跨域就是被浏览器的同源策略限制的.

也就是说，==浏览器会阻止非同源的请求.==

那什么是非同源呢？==域名或端口不同的，都属于非同源.==

==浏览器只会阻止表单以及Ajax请求的跨域，但不会阻止src请求跨域.==

所以，我们的cdn、图片等src请求都是正常的.

JsonP实现跨域

==JsonP跨域的原理是利用了浏览器不阻止src请求跨域来实现的.==

==JsonP只能实现GET请求跨域.==

首先 准备我们的视图文件

from django.http import HttpResponse
from rest_framework.views import APIView

class TestView(APIView):
  def get(self, request):
    return HttpResponse("handlerResponse('is ok')")
    # 注意返回的函数以及参数的格式

然后 HTML文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>JsonP跨站请求测试</title>
</head>
<body>
<script>
  // 函数名应为handlerResponse，这是一种约定俗成
  function handlerResponse(data) {
    alert(data)
  }
</script>
<!--必须放在被执行函数的script标签的下面，否则会报错函数不存在-->
<script src="http://127.0.0.1:8000/test/"></script>
</body>
</html>

好了 我们来测试吧

可以看到，我们成功实现了跨域获取数据.

JsonP解决跨域只能发送GET请求，并且实现起来前后端交互会比较多，现在几乎已经不在使用了

在Django中间件中添加响应头

可实现简单请求和复杂请求的跨域

第一步 准备中间件

from django.utils.deprecation import MiddlewareMixin

class MyCors(MiddlewareMixin):
  def process_response(self, request, response):
    # 如下，等于'*'后，便可允许所有简单请求的跨域访问
    response['Access-Control-Allow-Origin'] = '*'

    # 判断是否为复杂请求
    if request.method == 'OPTIONS':
      response['Access-Control-Allow-Headers'] = 'Content-Type'
      response['Access-Control-Allow-Methods'] = 'PUT,PATCH,DELETE'

    return response

写好之后，别忘记了去注册.

第二步 视图文件

from django.http import HttpResponse
from rest_framework.views import APIView

class TestView(APIView):
  def get(self, request):
    return HttpResponse("这是GET请求的数据")
  def post(self, request):
    return HttpResponse("这是POST请求的数据")
  def put(self, request):
    return HttpResponse("这是PUT请求的数")

第三步 HTML文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <title>test</title>
</head>
<body>
<button id="sign">点击发送跨站请求</button>
<script>
  $('#sign').click(function () {
    $.ajax({
      url: 'http://127.0.0.1:8000/test/', // 要访问的外站
      type: 'put', // 请求类型, put为复杂请求
      contentType: 'application/json', // 指定为'application/json'后，将变为复杂请求
      success: function (data) {
        // 请求成功后将执行该函数
        // data是外站发送过来的数据
        alert(data)
      },
    });
  });
</script>
</body>
</html>

测试效果如下

可见，我们实现了复杂请求的跨域，简单请求就更不用说了.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

  • 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跨域请求问题的解决方法示例

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

  • django解决跨域请求的问题详解

    解决方案 1.安装django-cors-headers pip install django-cors-headers 2.配置settings.py文件 INSTALLED_APPS = [ ... 'corsheaders', ... ] MIDDLEWARE_CLASSES = ( ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', # 注意顺序 ... ) #

  • django解决跨域请求的问题

    解决方案 1.安装django-cors-headers pip install django-cors-headers 2.配置settings.py文件 INSTALLED_APPS = [ ... 'corsheaders', ... ] MIDDLEWARE_CLASSES = ( ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', # 注意顺序 ... ) #

  • Django实现跨域请求过程详解

    Django实现跨域请求过程详解

    前言 CORS 即 Cross Origin Resource Sharing 跨域资源共享. 跨域请求分两种:简单请求.复杂请求. 简单请求 简单请求必须满足下述条件. HTTP方法为这三种方法之一:HEAD.GET.POST HTTP头消息不超出以下字段: Accept.Accept-Language.Content-Language.Last-Event-ID 且Content-Type只能为下列类型中的某一个: application/x-www-from-urlencoded mult

  • Spring Boot设置支持跨域请求过程详解

    现代浏览器出于安全的考虑, HTTP 请求时必须遵守同源策略,否则就是跨域的 HTTP 请求,默认情况下是被禁止的,IP(域名)不同.或者端口不同.协议不同(比如 HTTP.HTTPS)都会造成跨域问题. 一般前端的解决方案有: ① 使用 JSONP 来支持跨域的请求,JSONP 实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的 SRC 不受同源策略约束来跨域获取数据.缺点是需要后端配合输出特定的返回信息. ② 利用反应代理的机制来解决跨域的

  • JSONP跨域请求实例详解

    JSOP简介 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSON

  • JS JSOP跨域请求实例详解

    在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu

  • Vue Ajax跨域请求实例详解

    一.设置config/index.js || proxyTable添加 proxyTable: { '/api': { target: 'http://192.168.48.239:8080/ydzl', changeOrigin: true, pathRewrite: { '^/api': '' } } 二.mian.js 添加vue全局属性 Vue.prototype.HOST = '/api' 三.如果是post的话 1.修改数据格式 transformRequest: [function

  • Spring实现处理跨域请求代码详解

    一次正常的请求 最近别人需要调用我们系统的某一个功能,对方希望提供一个api让其能够更新数据.由于该同学是客户端开发,于是有了类似以下代码. @RequestMapping(method = RequestMethod.POST, value = "/update.json", produces = MediaType.APPLICATION_JSON_VALUE) public @ResponseBody Contacter update(@RequestBody Contacter

  • Nginx配置跨域请求Access-Control-Allow-Origin * 详解

    前言 当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服务器配置响应的header参数: 一. 解决方案 只需要在Nginx的配置文件中配置以下参数: location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET

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

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

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

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

  • php apache开启跨域模式过程详解

    apaceh 配置: <VirtualHost *:80> ServerAdmin xxx@qq.com DocumentRoot "C:/htdocs/demo" ServerName dev.dd.cn ##ErrorLog "logs/dummy-host.localhost-error.log" ##CustomLog "logs/dummy-host.localhost-access.log" combined <Di

随机推荐