Vue和Django前后端实现跨域

1.为什么要解决跨域:

        前端与后端分处不同的域名,因为客户端访问不同源的服务端时会遭到浏览器的同源策略的拦截,所以我们需要配置CORS,处理的方式有很多,先来说下自己学习到的。

2.前端处理跨域:

        前端项目是通过vite来创建的,需要在vue.config.js中配置,server部分是新增的跨域配置,如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  //配置跨域
  server: {
    port:'5173',           // 客户端的运行端口,此处也可以绑定vue运行的端口,当然也可以写在pycharm下
    host:'localhost', // 客户端的运行地址,此处也可以绑定vue运行的域名,当然也可以写在pycharm下
    // 跨域代理
    proxy: {
        '/api': {
            // 凡是遇到 /api 路径的请求,都映射到 target 属性  /api/header/  ---> http://api.luffycity.cn:8000/header/
            target: 'http://127.0.0.1:8000/',
            changeOrigin: true,
            ws: true,    // 是否支持websocket跨域
            rewrite: path => path.replace(/^\/api/, '')
        }
    }
  }

})

         配置了跨域配置之后,启动vue项目如果能正常启动,则说明前端配置无误,在这里犯了一个小错误,在host中带了前缀“http”导致项目启动报错,报错信息如下:

3.模拟请求跨域

        之前在处理跨域的时候听人家说处理跨域的方法有好几种,其中有一种就是上述在vite创建项目前端中配置,模拟请求发现报错,如下所示:

        用get请求通过后端接口:http://127.0.0.1:8000/home/test获取redis中的数据进行打印。

<template>
  <Header></Header>
  
  <Footer></Footer>
</template>

<script setup>
import Header from "../components/Header.vue"
import Footer from "../components/Footer.vue"

// 测试CORS的跨域配置是否有问题
import axios from "axios"
const http = axios.create()

// 测试服务端的跨域是否配置成功
http.get("http://127.0.0.1:8000/home/test").then(response=>{
  console.log(response.data);
})
</script>



<style scoped>

</style>

         前端请求报错如下所示:

         报错信息:localhost/:1 Access to XMLHttpRequest at 'http://127.0.0.1:8000/home/test' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法:在后端也做一些跨域的配置

4.后端处理跨域:

安装django-cors-headers库:

pip install django-cors-headers

在Django项目的settings.py中进行配置:

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

# 允许所有域名访问
CORS_ALLOW_ALL_ORIGINS = True

# 或者允许特定域名访问
# CORS_ALLOWED_ORIGINS = [
#     "http://localhost:5173",
# ]

        再次在前端发起请求,能够正常从redis中获取到数据,如下所示:

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueDjango都是非常流行的Web开发框架,Vue是一个JavaScript框架,用于构建单页面应用程序,而Django是一个Python框架,用于构建Web应用程序。在这里,我将向您展示如何使用VueDjango构建一个完整的Web应用程序。 首先,您需要决定如何组织您的项目。您可以将Vue作为前端Django作为后端,或者将它们结合在一起,使用Django作为API,并使用Vue作为前端框架来调用API。 在这里,我们将使用VueDjango结合在一起,使用Django作为API,Vue作为前端框架。这意味着我们将使用Django来处理所有的后端逻辑,并使用Vue来渲染前端页面并调用Django API。 步骤如下: 1. 安装和配置Django 首先,您需要安装Django。您可以使用pip在命令行中运行以下命令来安装Django: ``` pip install django ``` 安装完成后,您需要创建一个新的Django项目。在命令行中输入以下命令: ``` django-admin startproject myproject ``` 这将创建一个名为myproject的新Django项目。 2. 创建Django应用程序 在Django中,应用程序是一个可重用的组件,用于执行特定任务。在我们的项目中,我们将创建一个名为api的Django应用程序,用于处理所有的API请求。 在命令行中,进入myproject目录,并运行以下命令: ``` python manage.py startapp api ``` 这将创建一个名为api的新Django应用程序。 3. 配置Django路由 在Django中,路由用于指定应用程序如何响应特定的URL。在我们的项目中,我们将使用Django路由来指定如何处理API请求。 在api应用程序的目录中,创建一个名为urls.py的新文件,并添加以下代码: ```python from django.urls import path from . import views urlpatterns = [ path('api/', views.api_view, name='api_view'), ] ``` 这将创建一个新的路由,并将其指向api_view视图函数。我们将在下一步中创建这个视图函数。 4. 创建Django视图函数 在Django中,视图函数用于处理HTTP请求并返回HTTP响应。在我们的项目中,我们将创建一个名为api_view的视图函数,用于处理API请求。 在api应用程序的views.py文件中,添加以下代码: ```python from django.http import JsonResponse def api_view(request): data = { 'message': 'Hello, world!' } return JsonResponse(data) ``` 这将创建一个简单的视图函数,返回一个包含“Hello, world!”消息的JSON响应。 5. 配置Django设置 在Django中,设置用于配置应用程序的特定行为。在我们的项目中,我们需要配置Django以允许跨域请求,并将api应用程序添加到INSTALLED_APPS设置中。 在myproject目录中,打开settings.py文件,并添加以下代码: ```python INSTALLED_APPS = [ # ... 'api', ] CORS_ORIGIN_ALLOW_ALL = True ``` 这将启用跨域请求,并将api应用程序添加到INSTALLED_APPS设置中。 6. 创建Vue应用程序 接下来,我们将创建Vue应用程序。在命令行中,运行以下命令: ``` vue create myapp ``` 这将创建一个名为myapp的新Vue应用程序。 7. 配置Vue应用程序 在Vue应用程序的src目录中,打开main.js文件,并添加以下代码: ```javascript import Vue from 'vue' import App from './App.vue' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$http = axios.create({ baseURL: 'http://localhost:8000' }) new Vue({ render: h => h(App), }).$mount('#app') ``` 这将配置Vue应用程序,使其使用Axios库调用Django API。请注意,我们使用了http://localhost:8000作为API的基本URL,这是Django的默认端口。 8. 创建Vue组件 在Vue应用程序的src目录中,创建一个名为HelloWorld.vue的新文件,并添加以下代码: ```html <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { data() { return { message: '' } }, mounted() { this.$http.get('/api/') .then(response => { this.message = response.data.message }) } } </script> ``` 这将创建一个Vue组件,用于显示从Django API返回的消息。 9. 渲染Vue应用程序 在Vue应用程序的src目录中,打开App.vue文件,并添加以下代码: ```html <template> <div> <HelloWorld /> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> ``` 这将渲染Vue应用程序,并在页面上显示HelloWorld组件。 10. 运行项目 现在,您已经完成了VueDjango的配置。在命令行中,进入myproject目录,并运行以下命令: ``` python manage.py runserver ``` 这将启动Django服务器。在另一个命令行窗口中,进入myapp目录,并运行以下命令: ``` npm run serve ``` 这将启动Vue开发服务器。现在,您可以在浏览器中访问http://localhost:8080,看到来自Django API的“Hello, world!”消息。 至此,您已经成功地使用VueDjango构建了一个完整的Web应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值