Django使用中间件解决前后端同源策略问题

问题描述

前端时间在公司的时候，要使用angular开发一个网站，因为angular很适合前后端分离，所以就做了一个简单的图书管理系统来模拟前后端分离。

但是在开发过程中遇见了同源策略的跨域问题，页面能够显示，但是却没有数据，显示如下

右键检查报错如下：

报错代码如下

Failed to load http://127.0.0.1:8888/publisher/:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:4200' is therefore not allowed access.

angular从后端获取数据的代码如下：

private publishersUrl = 'http://127.0.0.1:8888/publisher/';
private addpubUrl = 'http://127.0.0.1:8888/addpub/';
getPublishers (): Observable<Publisher[]> {
  return this.http.get<Publisher[]>(this.publishersUrl)
  .pipe(
   catchError(this.handleError<Publisher[]>('getPublishers', []))
  );
}

问题原因

出现这个问题的原因是同源策略的跨域问题，关于这个问题不在此处详细讨论，如有兴趣可以去搜索一下。

问题解决

解决这个问题关键在于后端，要允许其他网站进行访问，在这里我们可以定义一个中间件来解决这个问题，步骤如下。

1.在app下新建一个myMiddleware.py文件。

2.在文件中加入以下代码

from django.utils.deprecation import MiddlewareMixin
class MyCore(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'] = "POST, DELETE, PUT"
    return response

3.去settings文件中注册中间件

MIDDLEWARE = [
  'BMS.myMiddleware.MyCore',
]

至此，这个问题就算解决了，我们可以将项目运行起来看一下结果

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

赞 (0)

相关推荐

  • Django2.1.3 中间件使用详解

    环境 Win10 Python3.6.6 Django2.1.3 中间件作用 中间件用于全局修改Django的输入或输出. 中间件常见用途 缓存 会话认证 日志记录 异常 中间件执行流程 全局异常捕捉实现 创建django项目&添加app django-admin startproject middleware cd middleware django-admin startapp app 添加app到项目 # middleware/settings.py # INSTALLED_APPS最后添

  • 详解Django中间件的5种自定义方法

    Django中间件 在http请求 到达视图函数之前 和视图函数return之后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 中间件的执行流程 1.执行完所有的request方法 到达视图函数. 2.执行中间件的其他方法 3.经过所有response方法 返回客户端. 注意:如果在其中1个中间件里 request方法里 return了值,就会执行当前中间件的response方法,返回给用户 然后 报错..不会再执行下一个中间件. 自定义中间件 1.在project下随便创建

  • Django+Vue.js搭建前后端分离项目的示例

    Django+Vue.js搭建前后端分离项目的示例

    在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

  • 详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击

    一.在django后台处理 1.将django的setting中的加入django.contrib.messages.middleware.MessageMiddleware,一般新建的django项目中会自带的. MIDDLEWARE_CLASSES = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middle

  • 详解Python的Django框架中的中间件

    什么是中间件 我们从一个简单的例子开始. 高流量的站点通常需要将Django部署在负载平衡proxy之后. 这种方式将带来一些复杂性,其一就是每个request中的远程IP地址(request.META["REMOTE_IP"])将指向该负载平衡proxy,而不是发起这个request的实际IP. 负载平衡proxy处理这个问题的方法在特殊的 X-Forwarded-For 中设置实际发起请求的IP. 因此,需要一个小小的中间件来确保运行在proxy之后的站点也能够在 request.

  • 深入理解Django的中间件middleware

    本文讲述的内容基于 Django 1.11 摘要 Django 中的中间件(middleware),是一个镶嵌到Django的request/response处理机制中的一个hooks框架,是一个修改django全局输入输出的一个底层插件系统.让我们可以自定义想要的一些功能来处理用户的请求. 在Django中,中间件其实就是一个类,在类中包含一组特定的功能,在请求到来或者结束时,Django会根据我们定义的中间件规则执行中间件中对应的方法,一个 Django 项目默认激活的中间件在我们项目中的配

  • 简介Django中内置的一些中间件

    认证支持中间件 中间件类: django.contrib.auth.middleware.AuthenticationMiddleware . django.contrib.auth.middleware.AuthenticationMiddleware . 这个中间件激活认证支持功能. 它在每个传入的 HttpRequest 对象中添加代表当前登录用户的 request.user 属性. It adds the request.user attribute, representing the

  • Django使用中间件解决前后端同源策略问题

    Django使用中间件解决前后端同源策略问题

    问题描述 前端时间在公司的时候,要使用angular开发一个网站,因为angular很适合前后端分离,所以就做了一个简单的图书管理系统来模拟前后端分离. 但是在开发过程中遇见了同源策略的跨域问题,页面能够显示,但是却没有数据,显示如下 右键检查报错如下: 报错代码如下 Failed to load http://127.0.0.1:8888/publisher/: No 'Access-Control-Allow-Origin' header is present on the requeste

  • springboot解决前后端分离时的跨域问题

    随着分布式微服务的兴起,越来越多的公司在开发web项目的时候选择前后端分离的模式开发,前后端分开部署,使得分工更加明确,彻底解放了前端. 我们知道,http请求都是无状态,现在比较流行的都是jwt的形式处理无状态的请求,在请求头上带上认证参数(token等),前后端分离有好处,也有坏处,第一次开发前后端分离项目的人,肯定会遇到前端请求跨域的问题,这个怎么处理呢?在说处理方案前,有必要说明一下为什么会跨域和什么是跨域? 一.为什么会跨域? 出于浏览器的同源策略限制.同源策略(Sameoriginp

  • 解决前后端分离 vue+springboot 跨域 session+cookie失效问题

    环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无

  • nuxt+axios解决前后端分离SSR的示例代码

    nuxt+axios解决前后端分离SSR的示例代码

    ​背景:由于后端程序猿通常对CSS .JS掌握不是特别好,通常的开发模式,UI把静态html做好交给程序猿,程序猿开发,把静态html变成动态的时候经常会有各种样式错乱的问题,并且要迎合上级一天三遍样式需求,因此决定用前后端分离.考虑到网站的推广,又必须做SEO.前端框架选择VUE,解决SSR顺便选择了nuxt.js,此为背景. 一.准备工作 1.安装nodejs 2.安装vuejs 3.安装vue-cli 4.安装nuxt 二.创建nuxt项目并配置 找一个自己喜欢的目录,作为你的worksp

  • Django之提交表单与前后端交互的方法

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请求 GET 请求过程 前端通过ajax发起GET请求,json格式数据 var data = { "name": "test", "age": 1 }; $.ajax({ type: 'GET', url: /your/url/, data: dat

  • 解决angularjs前后端分离调用接口传递中文时中文乱码的问题

    1.首先前端需要进行字符串加密两次 encodeURIComponent(encodeURIComponent(param)); 2.这里是以java后台为例需要进行一次解码 URLDecoder.decode("接受到的String类型参数","UTF-8") 示例如下: @RequestMapping("looked_list") public Map lookedList(@RequestParam Map map) throws Unsu

  • 基于NodeJS的前后端分离的思考与实践（三）轻量级的接口配置建模框架

    基于NodeJS的前后端分离的思考与实践（三）轻量级的接口配置建模框架

    前言 使用Node做前后端分离的开发模式带来了一些性能及开发流程上的优势, 但同时也面临不少挑战.在淘宝复杂的业务及技术架构下,后端必须依赖Java搭建基础架构,同时提供相关业务接口供前端使用.Node在整个环境中最重要的工作之一就是代理这些业务接口,以方便前端(Node端和浏览器端)整合数据做页面渲染.如何做好代理工作,使得前后端开发分离之后,仍然可以在流程上无缝衔接,是我们需要考虑的问题.本文将就该问题做相关探讨,并提出解决方案. 由于后端提供的接口方式可能多种多样,同时开发人员在编写Nod

  • shiro整合springboot前后端分离

    本文实例为大家分享了shiro整合springboot前后端分离的具体代码,供大家参考,具体内容如下 1.shiro整合springboot的配置 package com.hisi.config; import java.util.LinkedHashMap; import java.util.Map; import javax.servlet.Filter; import org.apache.shiro.session.mgt.eis.MemorySessionDAO; import org

  • 解决django前后端分离csrf验证的问题

    第一种方式ensure_csrf_cookie 这种方方式使用ensure_csrf_cookie 装饰器实现,且前端页面由浏览器发送视图请求,在视图中使用render渲染模板,响应给前端,此时这个渲染模板的视图函数上要加上这个装饰器 这种方式保证了模板返回时,前端接收到的响应中有csrftoken这个cookie,方法见代码. 以上方法并没有严格意义的前后分离,如果模板中有form表单,可以直接在模板中添加{% csrf_token %}. 第二种方式 前后完全分离,前端页面直接通过获取静态文

随机推荐