最近写的毕设要求前后端分离进行开发，把前后端连起来就有一些小问题，结合之前springboot +vue的小设计也遇到过这样的问题，就可以小小的解决一下。那就浅记录一下吧。

Django方面

django这边主要是要使用一个命令，在settings.py中做一些操作。
首先就是一个命令，用pip下载：

pip3 install django-cors-headers

这个django-cors-headers可是个好东西，他专门就处理跨域请求的，有了他，就允许其他源向django发出浏览器内的请求。但是光下载还不太行，还是需要进行一系列的配置:
找到主目录下的settings.py文件，在里面进行相应的配置

INSTALLED_APPS = [
    ···
    'corsheaders',
    ···
]

这就跟要用DRF要在这个app里面添加rest_framework是一样的，没有就没法用
接下来就要进行进一步的配置（设置中间件），一样也是在settings.py文件里面：

MIDDLEWARE = [
    ···
    'corsheaders.middleware.CorsMiddleware',  # 解决跨域问题，注意与common.CommonMiddleware的顺序
    'django.middleware.common.CommonMiddleware',
    ···
]

我查了不少的文章，大致意思是说这个

'corsheaders.middleware.CorsMiddleware'

要放在最前面，我不太理解，我就没放，但是最后试了还是可以的，所以我觉得不是很必要，注意这两个的顺序就可以了我觉得。

最后的设置还是在settings.py文件中：

# 增加跨域忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
# 允许所有方法
CORS_ALLOW_METHODS = ('*')
# 允许所有请求头
CORS_ALLOW_HEADERS = ('*')
# 允许携带cookie
CORS_ALLOW_CREDENTIALS = True 

我这儿是直接允许了所有的，如果想更安全或者是更加有针对性一点的话，可以就添加白名单：

CORS_ORIGIN_WHITELIST = (
	'localhost:8080',
)

凡是出现在白名单里的域名都可以访问后端。
到这里，django的相关配置就完成了

Vue方面

vue这边主要就用一个axios，有了他就可以进行跨域访问后端的系统了
首先就是要下载，使用npm下载：

npm install axios

在项目目录的src里面的main.js引入axios以及挂载axios

import axios from 'axios'
//挂载axios
Vue.prototype.$http = axios
//访问根路径
axios.defaults.baseURL = "http://127.0.0.1:1101"

这样配置好就可以访问啦

p.s vue这儿的baseURL写Django后台的，django后台的白名单里写vue的路径

浅试一下

首先我们在Django里面创建一个app

python manage.py startapp app01

然后在app01这个app目录下的models.py小写一个类

class test(models.Model):
    name = models.CharField(max_length=20)
    age = models.IntegerField()

之后执行

python manage.py makemigrations
python manage.py migrate app01

现在数据库里已经有这个表了，随意创建两条数据
现在再在app01下的views.py下面写一个方法

from django.core import serializers
from django.http import JsonResponse
from django.shortcuts import render

from django.views.decorators.http import require_http_methods
from rest_framework.utils import json
from .models import test


@require_http_methods(['GET'])
def show_res(request):
    response = {}
    try:
        tests = test.objects.filter()
        response['list'] = json.loads(serializers.serialize("json", tests))
        response['msg'] = "success"
        response['error_num'] = 0
    except Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1
    return JsonResponse(response)

在app01的目录下创建一个urls.py文件，把访问路径写进去

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'show_res$', views.show_res),
]

再去主目录下面的urls.py把这个文件的目录包含进去

import app01.urls
urlpatterns = [
   ···
    url(r'^api/', include(app01.urls))
]

现在我们运行起来用postman测试一下
这会返回一个json的结果，可以看到这就是数据库的数据。现在转到vue试一下

<template>
  <el-button type="primary" @click="show">显示</el-button>
</template>

<script>
export default {
methods:{
  async show() {
    const {data: res} = await this.$http.get("show_res");//访问后台
    console.log(res)
  }
}
}
</script>

<style>

</style>

浅测一下

可以看到控制台获取到了后台的数据，这就成功啦

这样就浅浅记录完啦