DRF--跨域问题解决

1.什么是跨域?
        跨域是因为浏览器的同源策略导致的，也就是说浏览器会阻止非同源的请求。那什么是非同源呢？既域名不同，端口不同，都属于非同源的。比如我们用vue写了个前端页面，端口为8081，Django写了个后台，端口为8000，前端往后台提交数据，后台返回数据会被浏览器拦截，因为端口不同。这就是跨域。

浏览器只阻止表单以及ajax请求，并不会阻止src请求。所以我们得CDN，图片等src都可以发送。

跨域请求分为两种，一种是简单请求，一种是复杂请求。

        1.1 简单请求
                HTTP方法是下列方法之一 :HEAD、GET、POST
                HTTP头信息不超过以下几种字段:Accept，Accept-Language、Content-Language、

                        Last-Event-ID,application/x-www-from-urlencode,multpart/from-data,text/plain
        1.2 复杂请求 
                任何一个不满足上述要求的情求，都认为是复杂请求,复杂请求会先发出一个预请求，

                我们也叫预检，OPTIONS请求比如发送了一个post请求，

                Content-Type为application/json,这就是复杂请求

2.解决跨域:

        使用第三方库解决跨域的问题

        2.1.安装第三方库django-cors-headers

                pip3 install django-cors-headers

        2.2.django-cors-headers是一个app，所以需要我们在settings.py里的app里注册 corsheaders，尽量放在前面

 

        2.3.添加中间件，需要放在 'django.middleware.common.CommonMiddleware' 中间件之前

                'corsheaders.middleware.CorsMiddleware'

        2.4.添加白名单

CORS_ALLOW_CREDENTIALS = True  # 允许跨域时携带Cookie，默认为False
CORS_ORIGIN_ALLOW_ALL = True  # 所有ip都可以访问后端接口
# CORS_ORIGIN_WHITELIST = ["http://127.0.0.1:8080",["http://192.168.10.1:8080"]  # 指定能够访问后端接口的ip或域名列表

# 允许访问的请求方法
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

# 允许的headers
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

这样就可以解决跨域的问题