Django中间件处理Angular跨域：解决同源策略限制
发布时间：2026-10-13| 4人浏览过
本文介绍在使用Angular开发前后端分离项目时，如何遇到浏览器同源策略导致的跨域访问错误。通过Django后端定义自定义中间件，配置Access-Control-Allow-Origin等响应头，允许前端域名访问，从而解决数据获取失败的问题。
问题描述
问题描述
此前在公司开发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', []))
);
}问题原因
问题原因
该故障的根本原因在于浏览器的同源策略限制。关于跨域机制的详细原理此处不再赘述，感兴趣者可自行查阅相关资料。
问题解决
问题解决
解决此问题的核心在于后端配置，需明确允许其他域名的访问请求。在Django中，可通过定义中间件来实现这一功能，具体实施步骤如下。
1. 在Django应用目录下新建文件 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 response3. 在项目的 settings.py 配置文件中注册该中间件。
MIDDLEWARE = [
'BMS.myMiddleware.MyCore',
]完成上述配置后，问题即告解决。启动项目并运行，即可验证结果。
以上为本文全部内容，希望对读者有所帮助，欢迎继续支持本站。
免责声明：本文内容仅供参考，不代表本站观点。转载或引用请注明出处。
