DRF 跨域问题

news2024/11/15 11:56:58

【一】说明

CORS（跨来源资源共享，Cross-Origin Resource Sharing）是一种浏览器技术的规范，旨在解决浏览器同源策略（Same-Origin Policy）的限制，使得Web服务可以从不同的网域（源）安全地加载资源。

（1）浏览器同源策略

同源策略是浏览器的一种安全机制，用于限制在浏览器中加载的文档或脚本如何与不同源（协议、域名和端口）的资源进行交互。具体来说，当一个页面加载了来自特定源的资源后，该页面只能与同源的资源进行交互，而无法直接访问其他源的资源。
- 地址：指的是域名或IP地址。
- 端口：HTTP默认端口是80，HTTPS默认端口是443。如果端口不同，即使域名和协议相同，也视为不同源。
- 协议：HTTP和HTTPS是两种不同的协议，即使域名和端口相同，协议不同也视为不同源。

（2）CORS 跨域资源共享

CORS是一种机制，允许服务器在响应中设置一些特殊的HTTP头部，以授权其他域名下的页面访问自己的资源。这样，就可以绕过浏览器的同源策略限制，实现跨域资源共享。
CORS需要浏览器和服务器同时支持。对于浏览器来说，只要支持CORS的浏览器（如现代浏览器都支持，IE浏览器不能低于IE10），在发现AJAX请求跨源时，会自动添加一些附加的头信息（如Origin字段），有时还会多出一次附加的请求（预检请求，Preflight Request），但用户不会有感觉。
对于服务器来说，只要服务器实现了CORS接口（即在响应中设置了正确的CORS头部），就可以允许跨源通信。具体来说，服务器会在响应头部中添加一些CORS相关的字段，如Access-Control-Allow-Origin，来指定哪些源可以访问该资源。

（3）CORS请求的分类

浏览器将CORS请求分成两类：简单请求（Simple Request）和非简单请求（Not-So-Simple Request）。
- 简单请求：只要同时满足以下两大条件，就属于简单请求：
  - 请求方法是HEAD、GET、POST三者之一
  - HTTP的头信息不超出Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type（只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）这几种字段。
- 非简单请求：不同时满足简单请求条件的请求都属于非简单请求。对于非简单请求，浏览器会先发出一个预检请求（Preflight Request），询问服务器是否允许该跨域请求。如果服务器在预检请求的响应中同意了该请求，浏览器才会发出实际的CORS请求。

【二】方法一：自定义

（1）自定义中间件

from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
 def process_response(self,request,response):
     # options请求就是非简单请求的预检请求
     if request.method=="OPTIONS":
         response["Access-Control-Allow-Headers"]='Content-Type, *'  # 注意：通常不建议使用 '*'，应该明确列出允许的头
         response['Access-Control-Allow-Methods'] = 'GET, POST, PUT, PATCH, DELETE, OPTIONS'
         response['Access-Control-Max-Age'] = 86400  # 预检请求的缓存时间（秒）
     response["Access-Control-Allow-Origin"] = "*" # 注意：'*' 允许所有来源，但出于安全考虑，建议使用具体的来源  
     return response

注意
- 在生产环境中，通常不建议将 Access-Control-Allow-Origin 设置为 *，因为这可能会降低安全性。您应该将其设置为特定的源，如 'https://example.com'。
- Access-Control-Allow-Headers 也不应设置为 *，除非您确实希望允许所有头。通常，您应该明确列出您希望允许的头，如 'Content-Type, X-Requested-With'。

（2）添加到配置文件

MIDDLEWARE = [
 # ... 其他中间件 ...  
 '自定义中间位置.CorsMiddleWare',
 # ... 其他中间件 ...  
]

【三】方法二：第三方

（1）使用pip安装

pip install django-cors-headers

（2）注册app

在Django项目的 settings.py 文件中，将 'corsheaders' 添加到 INSTALLED_APPS 列表中。

INSTALLED_APPS = (  
 ...  
 'corsheaders',  
 ...  
)

（3）添加到中间件

在 settings.py 文件的 MIDDLEWARE 列表中，确保 'corsheaders.middleware.CorsMiddleware' 出现在其他中间件之前，但位于 'django.middleware.security.SecurityMiddleware' 之后（如果你使用了它）。

MIDDLEWARE = [  
 ...  
 'django.middleware.security.SecurityMiddleware',  
 'corsheaders.middleware.CorsMiddleware',  
 ...  
]

（4）配置CORS设置

在 settings.py 文件中，配置CORS相关的设置。

CORS_ORIGIN_ALLOW_ALL = True  # 如果设置为True，则允许所有源进行跨域访问  
CORS_ALLOW_METHODS = (  
 'DELETE',  
 'GET',  
 'OPTIONS',  
 'PATCH',  
 'POST',  
 'PUT',  
)  
CORS_ALLOW_HEADERS = (  
 'accept-encoding',  
 'authorization',  
 'content-type',  
 'dnt',  
 'origin',  
 'user-agent',  
 'x-csrftoken',  
 'x-requested-with',  
)  

# 如果希望允许携带凭证（如cookies、HTTP认证及客户端SSL证明等）的跨域请求  
# 需要设置以下两个配置，并且CORS_ORIGIN_ALLOW_ALL 必须为False，同时指定具体的源  
# CORS_ALLOW_CREDENTIALS = True  
# CORS_ORIGIN_WHITELIST = (  
#    'http://example1.com',  
#    'http://example2.com',  
#    ...  
# )

（5）源码简单分析

检查是否允许所有源
- 如果 CORS_ORIGIN_ALLOW_ALL 设置为 True 并且 CORS_ALLOW_CREDENTIALS 没有设置为 True（因为携带凭证的请求不允许使用 * 作为 Access-Control-Allow-Origin 的值），则中间件会将 Access-Control-Allow-Origin 设置为 *。
处理OPTIONS请求
- 当接收到 OPTIONS 请求时（即预检请求），中间件会根据 CORS_ALLOW_METHODS 和 CORS_ALLOW_HEADERS 的设置来设置相应的响应头 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。
可以发现自定义中间件就是简化的这部分代码