从Django后端处理跨域问题

前端报错欣赏：

Access
to
 XMLHttpRequest at 
'http://127.0.0.1:8000/todolist/getalltodo'
from
 origin 
'http://localhost:5173'
 has been blocked 
by
 CORS 
policy
: 
No
'Access-Control-Allow-Origin'
header
is
 present 
on
 the requested resource.

场景 ：运行在localhost:5137的前端项目需要访问运行在localhost:8080的接口
原因 ：浏览器存在同源策略机制，即不允许脚本访问外部资源，只要域名、协议、端口其中一个不一致就会出现跨域问题。
特点 ：

1. 跨域问题是浏览器侧的限制，所发送的请求是正常的，只是浏览器不接受
2. 只约束XmlHttpRequest，不约束img、iframe、script等具有src属性的标签

解决 ：添加中间件、反向代理、jsonp或利用插件

插件

使用django-cors-headers插件。插件是最快的，功能也简单详细，有手就行，文档在这里：文档地址
文档也很简单明了，需要注意的是Python和Django的版本。
安装

python -m pip 
install
 django-cors-headers

添加应用

INSTALLED_APPS
 = [
    ...,
"corsheaders"
,
    ...,
]

添加中间件

MIDDLEWARE
 = [
    ...,
"corsheaders.middleware.CorsMiddleware"
,
# 这条是Django自带的，提醒上一条应该放在这条的上面
"django.middleware.common.CommonMiddleware"
, 
    ...,
]

其他配置信息 （在setting.py底部添加）

CORS_ALLOW_CREDENTIALS
 = 
True
# 跨域处理：允许携带cookie
CORS_ALLOWED_ORIGINS
 = [ 
#设置访问白名单
'http://localhost:5173'
,
'http://127.0.0.1:8000'
]
CORS_ALLOW_HEADERS
 = [ 
# 配置预检请求
"accept"
,
"accept-encoding"
,
"authorization"
,
"content-type"
,
"dnt"
,
"origin"
,
"user-agent"
,
"x-csrftoken"
,
"x-requested-with"
,
]

添加中间件

导包

from
 django.utils.deprecation 
import
 MiddlewareMixin

定义中间件

class
CORSMiddleWare
(
MiddlewareMixin
):
"""
    设置跨域的中间件
    """
def
process_response
(
self, request, response
):
# 添加请求头
# 允许你的域名来获取数据(也可以指定域名)
        response[
'Access-Control-Allow-Origin'
] = 
'*'
if
 request.method == 
'OPTIONS'
:
# 允许你携带Content-Type请求头,也可以设置别的自定义字段(不设置客户端设置的就不能通过预检)
            response[
'Access-Control-Allow-Headers'
] = 
'Content-Type,k1, k2'
# 允许你发送DELETE,PUT的请求方式
            response[
'Access-Control-Allow-Methods'
] = 
'DELETE,PUT'
# 允许设置缓存时间
            response[
'Access-Control-Max-Age'
] = 
return
 response

注册

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'
,
'middle.cors_middle_ware.CORSMiddleWare'
,  
# 自定义跨域中间件
]

测试

$(
'#btn'
).on(
'click'
, 
function
 (
) {
  $.ajax({
url
: 
'http://localhost:9000/test1/'
,
method
: 
'post'
,
data
: {
username
: $(
'#name'
).val()
    },
headers
: {
'k1'
: 
'hello'
    },
success
: 
function
 (
data
) {
console
.
log
(data)
    }
  })
})

jsop

（跑题了，这里属于前端了）利用script标签的src属性（浏览器允许script标签跨域），利用js脚本动态的在头部引入跨域的地址
不足 ：只能是get请求，不能是post等别的请求

// 方法一、动态的添加跨域地址
function
Jsonp1
(
){
var
 tag = 
document
.
createElement
(
'script'
);
  tag.
src
 = 
"http://c2.com:8000/test/"
;
document
.
head
.
appendChild
(tag);
document
.
head
.
removeChild
(tag);
}
function
Jsonp2
(
){
  $.
ajax
({
url
: 
"http://c2.com:8000/test/"
,
type
: 
'GET'
,
dataType
: 
'JSONP'
,
success
: 
function
(
data, statusText, xmlHttpRequest
){
console
.
log
(data);
    }
  })
}

反向代理没有试过，不太清楚是怎么搞的，有朋友了解可以评论区交流~