由于本站以及很大部分项目都是前后端分离模式,前后端所配置的域名并不相同,所以会受到浏览器的同源策略限制,导致不能正确的请求资源,以下内容先用最简单的方法实现Django后端的跨域问题解决,后续原理再慢慢补充
pip install django-cors-headers
corsheaders
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
...
'corsheaders',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
...
]
中间件位置问题
'corsheaders.middleware.CorsMiddleware’这一行,位置尽量靠前些,这是网上比较推荐的做法,所以我个人将它摆放在第一排
# 跨域配置
CORS_ALLOW_CREDENTIALS = True
# 开发环境可以用,生产环境强烈不建议
CORS_ORIGIN_ALLOW_ALL = True # 允许所有源访问,仅在开发时使用
# 生产环境建议这样试试
CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOWED_ORIGINS = [
"http://example.com",
"https://www.example.com",
]
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
# 请求头配置
CORS_ALLOW_HEADERS = (
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'token'
)
以上是DRF跨域的基本实现,和网上大部分参考资料都差不太多,以下是一些理论上的东西,如果只是为了解决项目问题那不用看,比较干巴
CORS(Cross-Origin Resource Sharing)是一种浏览器技术的规范,也被称为跨域资源共享。它允许浏览器向跨源服务器发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持,所有现代浏览器都支持此功能,但老旧的浏览器(如IE9及以下版本)可能不支持或支持有限。
CORS的工作机制如下:
请求头中的Origin字段:当浏览器发出一个跨域请求时,它会在请求头中携带一个Origin字段,这个字段指明了请求的来源(协议 + 域名 + 端口)。
响应头中的CORS字段:服务器在接收到请求后,会检查请求的Origin字段,并根据其配置决定是否允许该跨域请求。如果允许,服务器会在响应头中添加相应的CORS字段,如Access-Control-Allow-Origin,来指明哪些源可以访问该资源。
浏览器的处理:浏览器在接收到响应后,会检查响应头中的CORS字段,并根据其值决定是否接受响应。如果请求的源被允许,则浏览器会接受响应并继续处理;否则,浏览器会抛出一个错误,并阻止响应的进一步处理。
CORS的两种请求类型包括简单请求和非简单请求(也称为预检请求)。对于简单请求,浏览器直接发出CORS请求;对于非简单请求,浏览器会先发出一个OPTIONS请求(预检请求),询问服务器是否允许这个跨域请求。如果服务器允许,浏览器才会发出实际的跨域请求。
综上所述,CORS是一种重要的浏览器安全机制,它允许前端应用安全地访问后端API,实现跨域的数据交换和功能实现。在DRF等Web框架中,通过配置CORS策略,可以灵活地控制哪些源可以访问后端资源,从而保护应用的安全性。
个人网站链接:www.simplespace.site