Django 解决CORS跨域问题的方法

这篇具有很好参考价值的文章主要介绍了Django 解决CORS跨域问题的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

产生跨域问题的原因

Cross-Origin Resource Sharing(CORS) 跨域问题,在前后端后离项目,selenium , playweight 自动化测试代码中经常遇到。 而使用 python request, curl, postman 等非浏览器代码发送请求时则不存在这个问题。

浏览器采用了同源保护策略,为了防御恶意攻击,会检查Request消息与Response消息的域名 Domain与端口 Port,如果不相同,则表示响应消息与请求消息不是同源,可能是伪造的响应消息,因此浏览器添加了CORS限制功能,默认不接受非同源的响应消息。

浏览器与服务器都运行在同一台电脑上为何仍出现跨域问题?
原因: Ajax脚本在本机浏览器运行时, 默认主机地址为http://127.0.0.1:8848,而开发环境 django服务默认地址为:http://localhost:8000 上,因此,浏览器与服务器虽然主机名相同,但端口不同,所以不符合CORS要求,故浏览器仍然会出现CORS错误。

解决思路

如何解决这种情形的问题呢?
浏览器同源策略有条规则,Response头部如果包含如下字段值,则不做CORS检查。

Access-Control-Allow-Origin: *

接下来就是如何添加这个参数。 方法通常有2种:
(1) 方法1: 在使用前端代理在response中添加Access-Control-Allow-Origin:头部参数;
(2) 方法2:在服务器端,给response添加Access-Control-Allow-Origin头部参数。

方法1,实施还是比较麻烦,前端还要安装node.js的服务代理程序才能实现。而方法2,如果服务器使用django,则实现很容易。即通过中间件middleware 对所有response添加、修改头部参数。

解决方法1: 通过自定义中间件修改Response头部

在myproject/myapp/ 目录下,新建1个 middlewares.py 文件

class CorsMiddleware(object):
    """中间件:跨域访问"""
    def __init__(self, get_response):
        self.get_response = get_response
    
    def __call__(self, request):
        return self.get_response(request)
    
    # process_template_response(), process_response() 只能二选一、根据view的response类型,重载相应方法。 
    def process_template_response(self,request,response):
        # 如果view 使用了render渲染response,使用这个中间件
        response["Access-Control-Allow-Origin"] = "*"
        return response
        
    def process_response(self,request,response):
        # 如果view使用HttpResponse, 将使用这个中间件
        response["Access-Control-Allow-Origin"] = "*"
        return response

这个类的方法 process_template_response(), process_response(),用于为每个django response添加1个Access-Control-Allow-Origin: * 头部参数, 两个方法使用1个就可以。 当然也可以利用这个中间件添加、修改其它头部参数。

将新定义的中间件 CorsMiddleware 添加到 settings.py 的 middleware classes:的列表,如 Ajax使用的主机+端口号,如:http://127.0.0.1:8848

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'myapp.middlewares.CorsMiddleware',  # 允许跨域访问中间件
]

再次发送Ajax请求,可以成功接收到django的响应数据。使用浏览器DevTools检查Response响应头部参数,可以看到已经添加了Access-Control-Allow-Origin: *

HTTP/1.1 200 OK
Date: Sat, 21 Aug 2023 08:26:17 GMT
Server: WSGIServer/0.2 CPython/3.11.4
Content-Type: text/html; charset=utf-8
Access-Control-Allow-Origin: *
X-Frame-Options: DENY
Content-Length: 5177
Vary: Cookie
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin

说明: 此方法虽然简单易行,Access-Control-Allow-Origin 设置为*, 允许任何跨域访问,显然不太安全,每次修改须更新代码,因此仅适用于开发测试环境。

解决方法2: 通过 django-cors-headers 库来实现

生产环境下,建议通过第3方库django-cors-headers 来实现,其步骤如下

1) 安装

pip install django-cors-headers

2) 修改 settings.py 配置文件

添加到应用列表

INSTALLED_APPS = (
    ##...
    'corsheaders'
)

添加中间件列表 corsheaders.middleware.CorsMiddleware

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    ......

然后,添加下面配置 允许所有 domain 访问

CORS_ORIGIN_ALLOW_ALL = True

或者,允许某些域访问

CORS_ORIGIN_ALLOW_ALL = False
# 允许域名加入白名单
CORS_ORIGIN_WHITELIST = (
    'http//:localhost:8000',
)

说明

在测试环境中,可以允许所有domain来访问,以避免 CORS问题,前后端分离项目在生产环境下,通常应该部署在同域下,
如果确实需要跨域,则将前端域名添加到白名单 CORS_ORIGIN_WHITELIST配置项中,禁止其它域访问。文章来源地址https://www.toymoban.com/news/detail-842675.html

到了这里,关于Django 解决CORS跨域问题的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Node.js 使用 cors 中间件解决跨域问题

    cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件,可以很方便地解决跨域问题。 CORS (Cross-Origin Resource Sharing,跨域资源共享)由一系列 HTTP 响应头 组成, 这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源 。 浏览器的 同源安全策略 默认会阻止网

    2024年01月20日
    浏览(47)
  • 解决系统开发中的跨域问题:CORS、JSONP、Nginx

    本博客配套的源码在这里 最近我在做一个系统的全栈开发,遇到了这样一个问题。 首先,我的前端是一个来自百度的开源框架——Amis,它封装自React.js,基于JSON配置。我下载了Amis提供的SDK文件夹,并进行了代码开发。但是我在部署整个系统的时候遇到了跨域问题。原因是,

    2024年01月20日
    浏览(58)
  • django后台启动CORS跨越配置

    什么是跨域问题? 跨域问题是指浏览器的同源策略限制了来自不同域的 AJAX 请求。 具体来说: 同源策略要求源相同才能正常进行 AJAX 通信。 判断是否同源需要满足三个条件: 协议相同(http或https) 域名相同 端口相同 不满足以上条件就是不同源,属于跨域。 举个例子: 前端域名是

    2024年02月09日
    浏览(38)
  • 前端调用DRI后端API出现跨域资源共享(CORS)问题解决办法

    目录 1. 引言 2. 跨源资源共享和实现方法 3. 在Django项目中配置django-cors-headers库 Reference 在进行后端API开发时,有时会遇到“跨域资源共享 (CORS) 请求...被阻止“的错误,如图1所示。本文讲解如何在使用DRF(Django REST Framework)的后端API开发项目中解决这个问题。 A cross-origin re

    2024年04月25日
    浏览(53)
  • 彻底理解前端安全面试题(3)—— CORS跨域资源共享,解决跨域问题,建议收藏(含源码)

    前端关于网络安全看似高深莫测,其实来来回回就那么点东西,我总结一下就是 3 + 1  = 4,3个用字母描述的【分别是 XSS、CSRF、CORS】 + 一个中间人攻击。当然 CORS 同源策略是为了防止攻击的安全策略,其他的都是网络攻击。除了这 4 个前端相关的面试题,其他的都是一些不常

    2024年02月01日
    浏览(48)
  • HBuilderX修改manifest.json设置,解决跨域问题(CORS、Cross-Origin)

    搭建一个前台uniapp,后台springboot的开发环境时,遇到了跨域问题。 console提示错误信息: Access to XMLHttpRequest at \\\'http://10.0.180.203/api/cms/getAdList?apId=1\\\' from origin \\\'http://localhost:8080\\\' has been blocked by CORS policy: Response to preflight request doesn\\\'t pass access control check: No \\\'Access-Control-Allow-Origin\\\'

    2024年02月10日
    浏览(43)
  • Python django解决跨域请求的问题

    1.安装django-cors-headers 2.配置settings.py文件 OK!问题解决! 另外还从网上看到其他两种解决方案,但都不太合适。在此列出,供大家参考 1.使用JSONP 使用Ajax获取json数据时,存在跨域的限制。不过,在Web页面上调用js的script脚本文件时却不受跨域的影响,JSONP就是利用这个来实现

    2024年02月16日
    浏览(45)
  • Chrome 跨域问题CORS 分析

    先叠个甲,有错误,望沟通指正! has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 类似上面的报错 ,就是出现了跨域限制访问问题 同源策略(Same-Origin Policy),这个是浏览器的一个策略.也就

    2024年03月18日
    浏览(34)
  • flask解决cors跨域请求

    CORS的全称是Cross-Origin Resource Sharing  ,有w3c组织制定的,现在这个规范,已经被大多数浏览器支持,处理跨域的需求。 CORS需要后端应用进行配置,因此,这是一种后端跨域的配置方式,这种方式很容易理解,一个陌生的请求来访问你的服务器,自然需要进行授权。。。 (关

    2024年02月12日
    浏览(60)
  • 前端跨域解决方案——CORS

    CORS(跨来源资源共享)是一种用于解决跨域问题的方案。 CORS(跨来源资源共享)是一种安全机制,用于在浏览器和服务器之间传递数据时,限制来自不同域名的请求。在前端开发中,当通过 XMLHttpRequest(XHR)或 Fetch API 发送跨域请求时,如果服务器没有正确配置 CORS,浏览器

    2023年04月27日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包