Vscode+Pycharm+Vue.js+WEUI+django火锅(六）Vue调用Django的API

一.可选调用方式
调用API，可以使用vue-resource插件方式
--安装
npm install --save vue-resource
--引入
 import VueResource from 'vue-resource'
  Vue.use(VueResource)
--调用
this.$http.get('url')
.then (function(response){})

但是据说这个方式存在浏览器兼容性问题，所以还是使用axios 方式。
--安装
npm install axios --save

二.使用百度AI给一个示例
<template>
  <div>
    <input type="text" v-model="username" placeholder="Username" />
    <input type="password" v-model="password" placeholder="Password" />
    <button @click="login">Login</button>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      .then(response => {
        // 登录成功的处理逻辑
        console.log('Authentication successful', response);
      })
      .catch(error => {
        // 登录失败的处理逻辑
        console.error('Authentication failed', error);
      });
    }
  }
};
</script>

三.一般的错误处理

错误1：使用双向绑定v-model时错误：
Cannot read properties of undefined (reading 'username')
TypeError: Cannot read properties of undefined (reading 'username')
检查输入性错误

错误2：Module not found: Error: Can't resolve 'axios' in webpack compiled with 1 error
这是因为axios没有安装成功导致。
PS C:\website\myproject> cnpm install --save axios

错误3：Cannot read properties of undefined (reading 'post')
TypeError: Cannot read properties of undefined (reading 'post')
原因是未在main.js中正确设置vue.prototype.http=axios导致

四.大大的错误：跨域错误
直接访问api是可以返回内容的，但是使用axios调用就出错。
返回错误信息：AxiosError: Network Error，在浏览器控制台中可以看到详细的错误信息：
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource
典型的跨域错误。
解决方法安装django-cors-headers并配置：
a.pip install django-cors-headers
b.应用'corsheaders',加入到INSTALLED_APPS
c.中间件    'corsheaders.middleware.CorsMiddleware' 加入MIDDLEWARE
d.黑白名单中CORS_ORIGIN_WHITELIST 添加域名。

结果安装时，嫌弃Django的版本太低，但是一升级就出新问题了，猪圈塌了，于是又重新降回老版本：

'WSGIRequest' object has no attribute 'get'
'WSGIRequest' object has no attribute 'session'

原因是新版本Django配置文件中用MIDDLEWARE_CLASSES，老版本用MIDDLEWARE，于是照猫画虎，两个都留着。

MIDDLEWARE_CLASSES = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    #'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    #'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    #'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

新问题解决了，但是跨域的问题还是没有解决。
最后只能通过返回时，指定Access-Control-Allow-origin=‘*’的方式。
           result = JsonResponse(jsondict)
           result['Access-Control-Allow-origin'] = "*"
           return result 
原因肯定是django-cors-headers哪里没有设置好，先不管了，有路走就继续往前走，以后再来收拾。