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', ]
至此,这个问题就算解决了,我们可以将项目运行起来看一下结果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
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中内置的一些中间件
认证支持中间件 中间件类: django.contrib.auth.middleware.AuthenticationMiddleware . django.contrib.auth.middleware.AuthenticationMiddleware . 这个中间件激活认证支持功能. 它在每个传入的 HttpRequest 对象中添加代表当前登录用户的 request.user 属性. It adds the request.user attribute, representing the
-
详解Django中间件的5种自定义方法
Django中间件 在http请求 到达视图函数之前 和视图函数return之后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 中间件的执行流程 1.执行完所有的request方法 到达视图函数. 2.执行中间件的其他方法 3.经过所有response方法 返回客户端. 注意:如果在其中1个中间件里 request方法里 return了值,就会执行当前中间件的response方法,返回给用户 然后 报错..不会再执行下一个中间件. 自定义中间件 1.在project下随便创建
-
Django+Vue.js搭建前后端分离项目的示例
在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py
-
详解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.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
-
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的示例代码
背景:由于后端程序猿通常对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的前后端分离的思考与实践(三)轻量级的接口配置建模框架
前言 使用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 %}. 第二种方式 前后完全分离,前端页面直接通过获取静态文
随机推荐
- AngularJS 面试题集锦
- 解决html按钮切换绑定不同函数后点击时执行多次函数问题
- IOS Cache设计详细介绍及简单示例
- 实例解析设计模式中的外观模式在iOS App开发中的运用
- Python操作sqlite3快速、安全插入数据(防注入)的实例
- 最短的javascript:地址栏载入脚本代码
- php框架Phpbean说明
- GREATNUKE为您提供免费PHP-Nuke建站系统
- python爬虫教程之爬取百度贴吧并下载的示例
- Android高仿微信5.2.1主界面及消息提醒
- android里面屏蔽home键/禁止Home键或者随你DIY
- JavaScript的9种继承实现方式归纳
- JavaScript实现点击按钮复制指定区域文本(推荐)
- ProcessMagnifier.vbs进程查看
- mssql关于一个表格结构的另外一种显示(表达意思不变)
- jquery 入门教程 [翻译] 推荐
- jQuery中绑定事件的命名空间详解
- Android中CountDownTimer 实现倒计时功能
- Android判断设备网络连接状态及判断连接方式的方法
- 网络克隆教程