Django解决Axios跨域问题（AxiosError {message ‘Network Error...）

Django解决Axios跨域问题（AxiosError {message: ‘Network Error…）

Django中接受axios请求时会遇到的AxiosError: Network Error问题，这是因为当你用axios发送一个请求到不同网站上（比如域名不同、端口不同），浏览器会认为这是不安全的操作，会拒绝这个请求

Django中会有专门的中间件解决这个跨域问题，先直接上代码

【1】安装

pip install django-cors-headers

【2】进入setting.py

1.注册app

INSTALLED_APPS = [
    '....其他app'
    'corsheaders',
]

2.注册中间件

MIDDLEWARE = [
    '....其他中间件'
    'corsheaders.middleware.CorsMiddleware',
]

3.新增配置文件

# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True
# 允许的请求头
CORS_ALLOW_HEADERS = (
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",

    # 额外允许的请求头
    'token',
)

原理

浏览器有一个名为同源策略（Same origin policy）的约定，它是浏览器最核心也最基本的安全功能

该策略限制请求的url中必须与浏览器上的url地址处于同域上，即域名(www.xxx.com)、端口(8080)、协议(http、https)相同，否则浏览器会报cors错误

CORS

CORS分为简单请求和非简单请求

• 简单请求：只请求一次，如果服务器处理了cors则正常返回，否则报错
• 非简单请求：先发送一次options请求，如果服务器处理了cors则再发送真正的请求，如果服务端没有处理则不会再发送

符合下面两个条件的就是简单请求

• 请求方式时以下三种之一
  • HEAD
  • GET
  • POST
• HTTP的头信息不超出以下几种字段
  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type

而django-cors-headers则会帮我们自动处理简单请求和非简单请求，因此不需要我们再手动添加字段，除非有额外允许的请求头参数