title: Django Vue Js Axios has been blocked by CORS policy
body: <p>Im using Django as backend and Vue as frontend, i use axios to make a request from Vue to Django.</p>
  
  <p>I know there is so many question about this, i've tried it all and wouldn't post a question if im not, i have been Googling it about 4 hours and yet still have the blocked by cors policy.
  <a href="https://i.stack.imgur.com/OkN7i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OkN7i.png" alt="blocked by cors policy"></a></p>
  
  <p>I've tried:</p>
  
  <ul>
  <li><p>Django-cors-header, with its middleware</p></li>
  <li><p>Vue-axios-cors, got new error with this one</p></li>
  <li>Adding header Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Allow-Credentials</li>
  <li>Adding / at the end of the url</li>
  </ul>
  
  <p>When i inspect it using fiddler, the POST request become OPTIONS, i have no idea whats happening.</p>
  
  <p>main.js</p>
  
  <pre><code>import Axios from 'axios'
  
  Vue.config.productionTip = false
  
  Vue.prototype.$http = Axios
  
  const csrf = localStorage.getItem("csrftoken")
  
  if (csrf){
    Vue.prototype.$http.defaults.headers.common['X-CSRFToken'] = csrf
  }
  
  Vue.prototype.$http.defaults.headers.common['Access-Control-Allow-Origin'] = "*"
  Vue.prototype.$http.defaults.headers.common['Access-Control-Allow-Methods'] = "GET, POST, PATCH, PUT, DELETE, OPTIONS"
  Vue.prototype.$http.defaults.headers.common['Access-Control-Allow-Headers'] = "Origin, X-Requested-With, Content-Type, Accept, X-Auth-Token, access-control-allow-origin, Authorization"
  Vue.prototype.$http.defaults.headers.common['Access-Control-Allow-Credentials'] = "true"
  </code></pre>
  
  <p>Login.vue</p>
  
  <pre><code>login(){
  
    const header = {
      headers:{
       'Access-Control-Allow-Origin' : "*",
       'Access-Control-Allow-Methods' : "GET, POST, PATCH, PUT, DELETE, OPTIONS",
       'Access-Control-Allow-Headers' : "Origin, X-Requested-With, Content-Type, Accept, X-Auth-Token, access-control-allow-origin, Authorization",
       'Access-Control-Allow-Credentials' : "true",
      }
    }
  
    this.$http.post('http://127.0.0.1:8000/api/dashboard/login/',{
      username: this.username,
      password: this.password,
  
    },header).then(function(response){
      console.log(response)
    }).catch(function(error){
      console.log(error)
    })
  
  },
  </code></pre>
  
  <p>this are the response from the network tab
  <a href="https://i.stack.imgur.com/2gfTH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2gfTH.png" alt="enter image description here"></a></p>
  
  <p>settings.py</p>
  
  <pre><code># SECURITY WARNING: don't run with debug turned on in production!
  DEBUG = True
  
  ALLOWED_HOSTS = ['localhost','127.0.0.1']
  
  
  # Application definition
  
  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
  
      'rest_framework',
      'corsheaders',
  
      'dashboard',
  
  ]
  
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      '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',
  ]
  
  ROOT_URLCONF = 'web.urls'
  
  TEMPLATES = [
      {
          'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': ['templates'],
          'APP_DIRS': True,
          'OPTIONS': {
              'context_processors': [
                  'django.template.context_processors.debug',
                  'django.template.context_processors.request',
                  'django.contrib.auth.context_processors.auth',
                  'django.contrib.messages.context_processors.messages',
              ],
          },
      },
  ]
  
  WSGI_APPLICATION = 'web.wsgi.application'
  
  # Database
  # https://docs.djangoproject.com/en/2.2/ref/settings/#databases
  
  DATABASES = {
      'default': {
          'ENGINE': 'django.db.backends.sqlite3',
          'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
      }
  }
  
  
  # Password validation
  # https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
  
  AUTH_PASSWORD_VALIDATORS = [
      {
          'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
      },
  ]
  
  
  # Internationalization
  # https://docs.djangoproject.com/en/2.2/topics/i18n/
  
  LANGUAGE_CODE = 'en-us'
  
  USE_I18N = True
  
  USE_L10N = True
  
  USE_TZ = True
  
  CORS_ORIGIN_ALLOW_ALL = True
  
  # Static files (CSS, JavaScript, Images)
  # https://docs.djangoproject.com/en/2.2/howto/static-files/
  
  STATIC_URL = '/static/'
  
  
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'static'),
      # os.path.join(BASE_DIR, 'vue'),
      ]
  </code></pre>