Django与Vue本地开发跨域问题

发表于 更新于 分类于

Vue 和 Django 结合实现前后端分离，但在本地开发环境使用 Axios 请求时遇到了跨域问题，这里记录下通过配置 vite.config.js 文件解决跨域的方法

说明

Django 启动的后端服务接口：http://127.0.0.1:8000/vue/

Vue 启动的前端页面：http://localhost:5173

版本

  • Vue：3.3.4
  • Vite：4.3.9
  • Django：4.2.3

Django 配置

假设项目名称 mysite、应用名称 polls

mysite/settings.py 文件配置

1
2
3
INSTALLED_APPS = [
    'polls.apps.ApiConfig',
]

mysite/urls.py 文件配置

1
2
3
urlpatterns = [
    path('', include('polls.urls')),
]

polls/views.py 文件配置

1
2
3
4
5
6
7
from django.http import JsonResponse


def vue(request):
    if request.method == 'GET':
        return JsonResponse({"data": "Hello, I'm Django"})
    return JsonResponse({"data": "None"})

polls/urls.py 文件配置

1
2
3
4
5
6
7
8
from django.urls import path

from . import views


urlpatterns = [
    path('vue/', views.vue, name='vue'),
]

启动服务

1
python manage.py runserver

访问 http://127.0.0.1:8000/vue/ 应该看到：

1
{"data": "Hello, I'm Django"}

Vue 配置

vite.config.js 文件配置

新增一个 server 配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default defineConfig({

    server: {
        proxy: {
            '/api': {
                // 后端服务接口，这里取自 'http://127.0.0.1:8000/vue/'
                target: 'http://127.0.0.1:8000',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }

})

/api 后面需与后端接口path拼接，比如与 http://127.0.0.1:8000/vue/ 中的 vue/ 拼接成 /api/vue/

App.vue 文件配置

使用 Axios 实现一个 get 请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
import axios from 'axios'

export default {
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    get() {
      axios('/api/vue/')
        .then(res => {
          this.msg = res.data.data
        })
        .catch(err => {
          this.msg = err
        })
    }
  }
}
</script>

<template>
  <div>
    <button @click="get">点击获取数据</button>
    <h2>Get请求：{{ msg }}</h2>
  </div>
</template>

/api/vue/：

  • /api：vite.config.js 设置的配置项
  • vue/：http://127.0.0.1:8000/vue/ 中的 PATH

重启服务

1
npm run dev

访问 http://localhost:5173 点击按钮应该看到

1
Get请求：Hello, I'm Django