跨域概述，简单积累

最新推荐文章于 2022-11-07 18:26:49 发布

原创最新推荐文章于 2022-11-07 18:26:49 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#django #python #后端

python 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了浏览器的同源策略，以及为解决跨域问题引入的CORS（跨域资源共享）机制。CORS分为简单请求和非简单请求，并详细阐述了其处理流程。针对Django框架，提供了两种跨域解决方案：直接在响应中设置允许的头部信息，以及使用django-cors-headers第三方库进行配置。最后，给出了具体的代码示例和配置步骤。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、同源策略
二、CORS
三、Django中的跨域解决方案
- 1. 在返回结果中允许信息
- 2. 使用django-cors-headers

一、同源策略

提供浏览器的一种安全机制；请求的url地址必须和浏览器上的url同域，即：端口，协议，IP全部相同，如果任意一个不满足，则表示不同源；

如：从127.0.0.1：8000 请求 127.0.0.1:8001

当未进行处理的时候，浏览器会作出反应发生报错进行拦截。

二、CORS

CORS（跨域资源共享），由浏览器和服务器双方共同支持解决跨域问题。
CORS请求分为两种：简单请求和非简单请求

请求方法为：HEAD， GET，POST其中一种
HTTP的头信息不超过：Accept， Accept-Language, Content-Language, Content-type
满足上述两种情况，则表示简单请求

简单请求：仅发送一次
非简单请求：包含两次请求，第一次为OPTIONS（预检请求），如果预检通过则发送第二次请求（真正的数据）

解决跨域的方式：
- 简单请求：
   服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 ‘*’
- 非简单请求：
   在发送预检请求的时候，允许请求方式：Access-Control-Request-Method; 允许请求头：Access-Control-Request-Headers

实现原理：
   当浏览器发现跨域请求的时候，如果是简单请求，会在请求头中添加Origin字段，表示来自哪个源；服务器接收到响应，会在响应头中添加Access-Control-Allow-Origin,指定域名或者通配；

三、Django中的跨域解决方案

1. 在返回结果中允许信息

data = {"dafd": access_token}
response = HttpResponse(json.dumps(data))
# 处理简单请求
response["Access-Control-Allow-Origin"] = "*"
# 预检方式
response["Access-Control-Allow-Methods"] = "POST, GET"
response["Access-Control-Max-Age"] = "1000"
# 预检请求头
response["Access-Control-Allow-Headers"] = "*"
return response

2. 使用django-cors-headers

django-cors-headers时第三方依赖，使用pip下载，修改settings配置文件

pip install django-cors-headers

在setting.py中添加应用：

INSTALLED_APPS = [
	...
    'corsheaders',
    ...
]

添加中间件：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

文件末尾添加：

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    '*'
)
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',

)