跨域问题详解/django-cors-headers/django-cors-headers源码

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

介绍

# 以后只要前后端分离项目,都会出现跨域问题,咱们要解决

# 同源策略
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现

请求的url地址,必须与浏览器上的url地址处于同域上:也就是[域名],[端口],[协议]相同.
http://127.0.0.1:8080
ftf://127.0.0.1:8080

比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名:127.0.0.1:8001一段数据

浏览器上就会报错,个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险

请求发送,服务的执行,数据也正常返回,只是被浏览器拦截了

# 正因为同源策略的存在,咱们写前后端分离的项目,无法正常获取到数据


# 解决跨域问题:
    1  jsonp 跨域(不了解)
    2  跨域资源共享(CORS)  后端技术
    3  Nginx代理


# CORS:跨域资源共享
CORS需要浏览器和服务器同时支持,所有浏览器都支持该功能
只需要服务的处理即可:只需要在在响应头中加入固定的头就实现cors---》比如在响应头中加入Access-Control-Allow-Origin='*'---->get请求就没有跨域了---》但是put请求还会有


# cors的请求分两种
    -简单请求,浏览器直接发起
    -非简单请求,浏览器先发送要给options预检请求,服务端允许,再发送真正的请求
# 什么是简单请求,什么是非简单请求
    # 如果属于下面,就是简单请求
    1 请求方法是以下三种方法之一:
        HEAD
        GET
        POST
     2 HTTP的头信息不超出以下几种字段:
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

        
# 使用cors解决跨域,就是再响应头中加入固定的一些东西,专门写个中间件
        res['Access-Control-Allow-Headers'] = 'token'
        res['Access-Control-Allow-Methods'] = 'DELETE'
        res['Access-Control-Allow-Origin'] = 'http://192.168.1.252:8080'

### 补充:######
前端访问的后端地址,一定要准确
 文章来源地址https://www.toymoban.com/news/detail-500562.html

自定义中间件,解决跨域问题

##### common_mideleware.py
from django.utils.deprecation import MiddlewareMixin


### 自定义中间件解决跨域问题---》以后其它框架都是这个原理---》django上有人做了
class CorsMiddleware(MiddlewareMixin):
    def process_response(self, request, response):
        if request.method == 'OPTIONS':
            response['Access-Control-Allow-Headers'] = 'token'
            response['Access-Control-Allow-Methods'] = 'DELETE'
        response['Access-Control-Allow-Origin'] = '*'
        return response
    
 ### 配置文件配置中间件
    MIDDLEWARE = [
        'utils.common_mideleware.CorsMiddleware'
    ]

django-cors-headers

####使用pip安装
pip3 install django-cors-headers  -i  https://pypi.tuna.tsinghua.edu.cn/simple

#####添加到setting的app中
INSTALLED_APPS = (
	...
	'corsheaders',
	...
)
#### 添加中间件
MIDDLEWARE = [  
	...
	'corsheaders.middleware.CorsMiddleware',
	...
]
#### 4、setting下面添加下面的配置
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
	'token',
    # 此处可以自定义,写自己定义的头
)

django-cors-headers源码

# 核心代码再中间件的---》process_response  3.0.14 版本
class CorsMiddleware(MiddlewareMixin):
    def process_response(self, request, response):
        if (
            not conf.CORS_ALLOW_ALL_ORIGINS
            and not self.origin_found_in_white_lists(origin, url)
            and not self.check_signal(request)
        ):
            return response
        if conf.CORS_ALLOW_ALL_ORIGINS and not conf.CORS_ALLOW_CREDENTIALS:
            response[ACCESS_CONTROL_ALLOW_ORIGIN] = "*"
        else:
            response[ACCESS_CONTROL_ALLOW_ORIGIN] = origin
        if request.method == "OPTIONS":
            response[ACCESS_CONTROL_ALLOW_HEADERS] = ", ".join(conf.CORS_ALLOW_HEADERS)
            response[ACCESS_CONTROL_ALLOW_METHODS] = ", ".join(conf.CORS_ALLOW_METHODS) 
        return response

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

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

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

相关文章

  • 彻底理解前端安全面试题(3)—— CORS跨域资源共享,解决跨域问题,建议收藏(含源码)

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

    2024年02月01日
    浏览(37)
  • nginx设置add_header失效 配置cors跨域失效无效的解决方案

    希望对大家有帮助,有用的话记得点个赞评个论,让俺知道这个法子可以帮助到大家哟!(虽然我这个法子很野) 最近在完成一个项目,后端API地址和前端地址不一致,这就涉及到了跨域的问题。 由于服务端加了一层Nginx作为反代,所以很自然的想到要去 .conf 配置文件中 加

    2024年02月12日
    浏览(29)
  • 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日
    浏览(28)
  • 前端跨域解决方案之CORS详解

    CORS 是一个 W3C 标准,全称是“跨源资源共享”( Cross-origin resource sharing ),或者通俗地 称为“ 跨域资源共享 ”。它允许浏览器向跨源的服务器,发出 XMLHttpRequest 请求,从而克服AJAX 只能同源使用的限制。 为了保证用户信息的安全,所有的浏览器都遵循 同源策略 。 所谓

    2024年02月08日
    浏览(67)
  • Spring Boot中解决跨域问题(CORS)

    首先解释什么是跨域,跨域就是前端和后端的端口号不同;会产生跨域问题,这里浏览器的保护机制(同源策略)。 同源策略:前端和后端的协议、域名、端口号三者都相同叫做同源。 我们看一下不同源: VUE:http://localhost:8080 Spring: http://localhost:8081/list 当我们出现跨域问题

    2024年02月06日
    浏览(44)
  • SpringCloudAlibaba:服务网关之Gateway的cors跨域问题

    目录 一:解决问题 二:什么是跨域 三:cors跨域是什么?  遇到错误:         前端请求时报错 解决: 网关中添加配置文件, 注意springboot版本 ,添加配置。 跨域是指浏览器处于安全考虑,对 JavaScript 发起的不同源的请求进行限制的一种机制。 所谓同源是指协议,域名和

    2024年02月15日
    浏览(32)
  • 搞懂 API,跨域资源贡献 (CORS )和安全性问题

    在 Web 应用开发中,API 是应用程序和其他系统之间进行数据交互的主要方式。 跨域资源共享(CORS)是一种常见的处理跨域请求的技术,但同时也带来了一些安全性问题。我将分享 CORS 技术及其安全性问题。 CORS 是指在浏览器端实现的机制,允许 Web 应用程序或 API 向不同的域

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

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

    2024年01月20日
    浏览(44)
  • Node.js 使用 cors 中间件解决跨域问题

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

    2024年01月20日
    浏览(35)
  • SpringBoot 配置CORS处理前后端分离跨域配置无效问题解析

    浏览器有跨域限制,非同源策略(协议、主机名或端口不同)被视为跨域请求,解决跨域有跨域资源共享( CORS )、反向代理和 JSONP 的方式。本篇通过 SpringBoot 的资源共享配置(CORS)来解决前后端分离项目的跨域,以及从原理上去解决跨域配置不生效的问题。 使用前后端分离开源项

    2023年04月23日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包