问题描述

前端时间在公司的时候,要使用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',
]

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

Django之使用中间件解决前后端同源策略问题的更多相关文章

  1. Nginx完美解决前后端分离端口号不同导致的跨域问题

    笔者在做前后端分离系统时,出现了很多坑,比如前后端的url域名相同,但是端口号不同.例如前端页面为:http://127.0.0.1/ , 后端api根路径为 http://127.0.0.1:888 ...

  2. 解决前后端调用,跨域二次请求Access-Control-Max-Age

    发现前后端分离的项目中,前端发起一个请求到后端,在Chrome浏览器下面debug的时候,Network下面看到同一个url有两条请求,url有两条请求,第一条请求的Method为OPTIONS,第二 ...

  3. 利用gulp解决前后端分离的header/footer引入问题

    在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共header和footer的引入.在传统利用后端渲染的情况下,我们可以把header.footer写成两个单独的模板,然后用后端语言 ...

  4. 解决前后端分离的“两次请求”引出的Web服务器跨域请求访问问题的解决方案

    在前后端分离的项目中,前端和后端可能是在不同的服务器上,也可以是Docker上,那就意味着前端请求后端Restful接口时,存在跨域情况. 后端在做了通用的跨域资源共享CORS设置后,前端在做ajax ...

  5. 08 Django REST Framework 解决前后端分离项目中的跨域问题

    01-安装模块 pip install django-cors-headers 02-添加到INSTALL_APPS中 INSTALLED_APPS = ( ... 'corsheaders', .. ...

  6. 如何解决前后端token过期问题

    问题描述: 首先后端生成的token是有时限的,在一段时间后不管前端用户是否进行了访问后端的操作,后端的token都会过期,在拦截器阶段就会返回错误的请求:token过期,从而拿不到想要的请求数据. ...

  7. 解决前后端分离后的Cookie跨域问题

    一. 前端Ajax关键配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: 'application/json', ...

  8. php解决前后端验证字符串长度不一致

    前端代码 function getStrleng(str){ var myLen =0; for(var i=0;i<str.length;i++){ if(str.charCodeAt(i)& ...

  9. mock的使用及取消,node模仿本地请求:为了解决前后端分离,用户后台没写完接口的情况下

    借鉴:https://www.jianshu.com/p/dd23a6547114 1.说到这里还有一种是配置node模拟本地请求 (1)node模拟本地请求: 补充一下 [1]首先在根目录下建一个d ...

随机推荐

  1. golang 时间转换的问题

    一般在获取到时间字符串,需要将时间字符串格式化为golang的"time.Time"对象的时候,通常有2个函数,分别是. time.Parse(layout, value stri ...

  2. 计算机原理以及PythonIDE配置和使用

    计算机基础 在巩固了昨日学习知识的基础上,增加了新的内容 整个关于计算机基础的学习可以浓缩为五个问题 什么是编程? 人与计算机之间的交互操作,使人可以奴役计算机从而让其代替人类工作的行为 操作系统有什 ...

  3. 【iOS】获取项目名和版本号

    iOS 开发中,有时候需要获取项目名和版本号,示例代码如下: -(void)getProjectNameAndVersion{ appName = [[[NSBundle mainBundle] in ...

  4. 七分钟理解什么是 KMP 算法

    本文是介绍 什么是 BF算法.KMP算法.BM算法 三部曲之一. KMP算法 内部涉及到的数学原理与知识太多,本文只会对 KMP算法 的运行过程. 部分匹配表 .next数组 进行介绍,如果理解了这三 ...

  5. bit、byte、kb、mb、g的区别

    1Byte=8bit1KB=1024Byte(字节)=8*1024bit1MB=1024KB1GB=1024MB1TB=1024GB bit是计算机数据的最小单元.要么是0,要么是1. byte 关键 ...

  6. 定时延时设计FPGA

    以50MHZ时钟为例,进行1秒钟延时,并输出延时使能信号. 首先计算需要多少次计时,MHZ=10的六次方HZ.T=20ns 一秒钟需要计时次数为5的七次方即5000_0000. 然后计算需要几位的寄存 ...

  7. Java基础之二十 并发

    20.1 并发得多面性 并发编程令人困惑的一个主要原因:使用并发时需要解决的问题有多个,而实现并发的方法也有多种,并且在这两者之间没有明显的映射关系. 20.1.1 更快的执行 速度问题初听起来很简单 ...

  8. Thinkphp5.0快速入门笔记(2)

    学习来源与说明 https://www.kancloud.cn/thinkphp/thinkphp5_quickstart 测试与部署均在windows10下进行学习. 示例建立新的模块和控制器 在a ...

  9. oracle-11g2下载安装笔记

    一.下载链接地址 http://download.oracle.com/otn/nt/oracle11g/112010/win64_11gR2_database_1of2.zip http://dow ...

  10. Unity经典游戏教程之:贪吃蛇

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...