vue+django+axios前后端分离项目实战经验

前提：本项目使用虚拟环境已经配置好，默认全都配置了django环境

前言

跨域的定义可以从广义和狭义两个角度来解释：

广义定义

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。这种跨域请求不仅仅局限于浏览器环境，也可能出现在其他客户端或服务器之间的通信中。在广义上，跨域是不同系统或不同应用之间资源共享和交互的一种表现。

狭义定义

狭义上的跨域特指浏览器环境下，由于浏览器的同源策略限制，一个域名下的网页无法直接访问另一个域名下的资源。同源策略是浏览器的一种安全策略，它要求如果两个资源的协议、域名、端口三者中有任何一个不同，那么这两个资源就处于不同的源，它们之间的请求就会受到浏览器的限制，这就是跨域问题。

具体来说，当一个网页（如A页面）尝试通过AJAX等方式请求另一个域名（如B域名）下的资源时，如果A页面和B域名不满足同源策略的要求（即协议、域名、端口三者完全相同），那么浏览器就会阻止这次请求，从而引发跨域问题。

跨域问题的解决方案

针对跨域问题，有多种解决方案，包括但不限于：

1. JSONP：一种非官方的跨域数据交互协议，它允许在服务器端集成Script标签返回至客户端，通过script标签没有跨域限制的“漏洞”来实现跨域请求。但JSONP只支持GET请求，且存在安全风险。

2. CORS（跨源资源共享）：一种基于HTTP头的机制，通过服务器设置相应的HTTP头信息来允许或拒绝来自不同源的请求。CORS是现代浏览器支持的一种跨域解决方案，它支持GET、POST等多种请求方式，并且相对安全。

3. 代理服务器：通过在客户端和服务器之间设置一个代理服务器，将跨域请求转发给代理服务器，由代理服务器向目标服务器发起请求，并将响应结果返回给客户端。这种方式可以绕过浏览器的同源策略限制，但会增加系统的复杂性和延迟。

4. 修改document.domain：对于主域相同但子域不同的跨域请求，可以通过修改页面的document.domain属性来使两个页面处于同一源下，从而解决跨域问题。但这种方法只适用于父子window之间的通信，且有一定的限制和兼容性问题。

   实战

1. 后端创建django项目

   找一个文件夹，进入cmd使用命令创建一个django项目

   django-admin startproject +项目名

   

         接下来用pycharm打开这个项目，终端使用命令创建应用

  python manage.py startapp +应用名

         创建好后的文件结构应为：

（项目文件结构）

        在setting.py中注册应用

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "app"#刚创建的应用在这里注册
]

​

        输入命令测试项目app是否能运行

python manage.py

2.vue前端使用axios连接后端项目

解决ajax跨域问题：(两种解决方法，普遍用第二种，这里介绍第二种)

1、jsonp

2、django-cors-headers

下载django-cors-headers

pip install django-cors-headers

在setting.py文件中注册

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "app"#刚创建的应用在这里注册,
    "corsheaders"#跨域注册
]

添加corsheaders中间件

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    'corsheaders.middleware.CorsMiddleware',#中间件，必须在这个django.middleware.csrf.CsrfViewMiddleware之前
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

在setting.py文件的最后添加CORS_ORIGIN_ALLOW_ALL = True允许所有域名访问（只适合测试，实际开发不适用），实际开发可以使用CORS_ALLOWED_ORIGINS = []设置白名单配置允许跨域的域名/IP

#配置cors的策略
CORS_ORIGIN_ALLOW_ALL = True

编写应用视图函数views.py测试前后端连接

from django.shortcuts import HttpResponse
​
def index(request):
    return  HttpResponse("测试")

在urls.py文件下配置路由，导入刚才编写的views视图函数，到这里后端配置已经结束

from django.contrib import admin
from django.urls import path
from app.views import index#导入视图函数
​
urlpatterns = [
    path("admin/", admin.site.urls),
    path("index/", index),#视图路由
]

注意：部分同学在导入应用时会报错，一直提示找不到这个模块，但是不会影响运行，可以直接运行，例如下图

解决方法：但是看着爆红心里确实不舒服，可以这么设置，将项目根目录设置为源目录即可，例如下图，报错完美解决

3. 配置前端vue项目

导入vue.js

导入axios，也可以下载到本地，这里使用cdn引用

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

创建message变量接收后端传递的data，并且渲染到页面上，在methods中创建一个方法gettest（），实现axios请求，在mounted中实现自动挂载

<div id="app">
        {{message}}
    </div>

data:{
            message:''
        },
        methods:{
            //方法没有缓存，每次调用都会执行
            gettest(){
                axios.get('http://127.0.0.1:8000/index/')//连接后端编写好的路由
                .then(res=>{
                    this.message=res.data//将后端返回的数据赋值给message
                })
                .catch(err=>{
                    console.log(err)//如果连接失败，打印错误信息
                })
            }
              mounted(){
            this.gettest()
        }

启动调试（最好在模拟服务器上打开，直接运行也行，这里使用liveserver调试）

获得后端返回的数据渲染在页面上，后端显示状态码为200，前后端连接成功