django 跨域问题

django 跨域问题

一、问题

由于开发模式为前后端分离式开发，故而通常情况下，前端和后端可能运行不同的ip或者port下，导致出现跨域问题

由于浏览器的同源（协议、域名、端口号都相同）策略，不同域名之间是不能相互访问传递数据，要使两个域名间传递数据，后端要添加跨域访问支持。

同源策略：
	同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源

出现跨域错误在浏览器显示错误信息：
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/test/' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

二、后端解决跨域问题

使用 django-cors-headers 中间件

## 前提条件

Python 3.5-3.7 supported.
Django 1.11-2.2 suppported.

2.1安装

1.下载中间件
## Install from pip:
pip3 install django-cors-headers

2.配置中间件
INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]
MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    '*'
)
# default 默认设置:
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)
# default 默认设置:
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

# 官网给的建议：将CorsMiddleware尽可能的放在最上方，尤其是CommonMiddleware 和 WhiteNoiseMiddleware
# github地址： https://github.com/ottoyiu/django-cors-headers/