django rest framework+vue出现from origin ‘null‘ has been blocked by CORS policy: No ‘Access-Control-Al

1.问题描述

在使用vue和django的做前后端分离项目时候，axios能够成功将请求发送给后端的django但是，前段vue不能成功接收到后端的response，错误代码如下from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2.解决办法

原因就是跨域问题，我们需要修改django的setting.py文件如下图（不是唯一解决方法）解决之前需要安装pip install django-cors-headers：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'restapp',
     'corsheaders',
    
]

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',
    'corsheaders.middleware.CorsMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True