django+vue实现跨域的示例代码

2024-09-27 16:04:01

版本

Django 2.2.3
Python 3.8.8
djangorestframework 3.13.1
django-cors-headers 3.11.0

django实现跨域

说明：此处方法为后端解决跨越，即django端解决跨越。

1. 安装 `django-cors-headers` 库

pip install django-cors-headers

2. 修改项目配置文件 `项目/settings.py`

...
# Application definition
INSTALLED_APPS = [
    'django.contrib.staticfiles',

    'corsheaders',  # 添加：跨域组件
    'rest_framework',  # 添加：DRF框架
    'home',  # 子应用
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 添加：放首行（放其他行未测试）
    'django.middleware.security.SecurityMiddleware',
    ...
# CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8080',
    # 这里需要注意： 1. 必须添加http://否则报错（https未测试） 2. 此地址就是允许跨域的地址，即前端地址
)
CORS_ALLOW_CREDENTIALS = True  # 允许ajax跨域请求时携带cookie

至此django端配置完毕

3. 前端vue使用`axios`访问后端django提供的数据接口，安装`axios`

npm install axios -S

4. 前端vue配置`axios`插件，修改`src/main.js`

...
import axios from 'axios';  // 添加： 导入axios包

// axios.defaults.withCredentials = true;  // 允许ajax发送请求时附带cookie
Vue.prototype.$axios = axios; // 把对象挂载vue中
···

5. 在`XX.vue`中跨域请求数据

···
    created: function() {
      // 获取轮播图
      this.$axios.get("http://127.0.0.1:8000/book/").then(response => {
        console.log(response.data)
        this.banner_list = response.data
      }).catch(response => {
        console.log(response)
      })
     // http://127.0.0.1:8000/book/ 这个就是后端django接口
···

代码

<template>
  <div class="div1">
      <el-carousel trigger="click" height="600px">
        <el-carousel-item v-for="book in book_list" :key="book.index">
          <a :href="book.link" rel="external nofollow" >
            <img width="80%" :src="book.image" alt="">
          </a>
        </el-carousel-item>
      </el-carousel>
  </div>
</template>

<script>
  export default {
    name:"Book",
    data(){
      return {
        book_list:[]
      };
    },
    created: function() {
      // 获取轮播图
      this.$axios.get("http://127.0.0.1:8000/book/").then(response => {
        console.log(response.data)
        this.book_list = response.data
      }).catch(response => {
        console.log(response)
      })
    }
  }
</script>
<style>
.div1 {
  margin-top: 100px;
  height: 1000px
}
img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
</style>

到此这篇关于django+vue实现跨域的文章就介绍到这了,更多相关django vue跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Django+vue跨域问题解决的详细步骤

跨域由于开发模式为前后端分离式开发,故而通常情况下,前端和后端可能运行不同的ip或者port下,导致出现跨域问题,故而单独说明什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景. 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.
Django+Vue跨域环境配置详解

概述在使用Django+Vue开发过程中,遇到了很多开发环境相关的问题,比如跨域,比如ajax请求参数等,本篇文章主要记录解决在开发过程中,遇到的一些问题. 跨域不带Cookie 在使用Vue脚手架开发的过程中,会使用Vue脚手架自带的Server进行项目调试,Vue自带的Server支持 hot reloading ,这个特性是非常好用的.但是在开发过程中,因为要与后端交互,所以在请求后端接口的时候,会遇到跨域问题,这个问题在一些职责划分清楚的团队并不存在,因为前端开发人员会才用Mock数据
浅谈django rest jwt vue 跨域问题

django rest framework 使用 router 注册url时,访问接口包302错误可能是因为请求url 写法有问题, 如请求 /api/login/ 报302 ,需要去掉后面的反斜杠,正确写法 /api/login 请求跨域: 跨域: 简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.这显然是不安全的.为此,浏览器的鼻祖:网景(Netscape)公司提出了优秀的解决方案:著名的浏览器同源策略.现在所有支持JavaScript的浏览
django+vue实现跨域的示例代码

目录版本 django实现跨域 1.安装django-cors-headers库 2.修改项目配置文件项目/settings.py 3.前端vue使用axios访问后端django提供的数据接口,安装axios 4.前端vue配置axios插件,修改src/main.js 5.在XX.vue中跨域请求数据版本 Django 2.2.3Python 3.8.8djangorestframework 3.13.1django-cors-headers 3.11.0 django实现跨域说明:此
django+vue实现注册登录的示例代码

注册前台利用vue中的axios进行传值,将获取到的账号密码以form表单的形式发送给后台. form表单的作用就是采集数据,也就是在前台页面中获取用户输入的值.numberValidateForm:前台定义的表单 $axios使用时需要在main.js中全局注册,.then代表成功后进行的操作,.catch代表失败后进行的操作 submitForm(formName) { let data = new FormData() data.append('username',this.number
Django+uni-app实现数据通信中的请求跨域的示例代码

前后端分离的模式下,后端使用Django RestFramework,前端使用uni-app来进行APP的开发. 前端代码: Django后端跨域配置 settings.py配置文件中添加: INSTALLED_APPS = [ 'corsheaders', ] 中间件中添加 'corsheaders.middleware.CorsMiddleware', # 注意顺序一定是在common中间件的前面 MIDDLEWARE = [ # 'accounts.MyCsrfMiddleware.CO
Django+Vue实现WebSocket连接的示例代码

近期有一需求:前端页面点击执行任务,实时显示后端执行情况,思考一波:发现 WebSocket 最适合做这件事. 效果测试 ping www.baidu.com 效果点击连接建立ws连接后端实现所需软件包后端主要借助Django Channels 实现socket连接,官网文档链接这里想实现每个连接进来加入组进行广播,所以还需要引入 channels-redis . pip channels==2.2.0 channels-redis==2.4.0 引入 settings.py INS
vue解决跨域路由冲突问题思路解析

vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: { '/goods/*': { target: 'http://localhost:3000' }, '/users/*
解决前后端分离 vue+springboot 跨域 session+cookie失效问题

环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了搜索问题,发现跨域,服务器响应的setCookie浏览器无
springboot跨域CORS处理代码解析

这篇文章主要介绍了springboot跨域CORS处理代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一源(Origin) 源指URL的协议,域名,端口三部分组成,如果这个三个成分都相同,就判定是同源,否则为不同源. 同源策略(Same origin policy)是一种浏览器的约定,即在浏览器中禁止非同源访问. 二 CORS CORS即"跨域资源共享"(Cross-origin resource sharing),是一个W
Vue axios 跨域请求无法带上cookie的解决

在main.js设置 // 携带cookie axios.defaults.withCredentials = true 补充知识:VUE axios请求跨域时没有带上cookie或者每次cookie都改变这两天用VUE写管理后端时,碰到一个奇葩问题: 我本地使用dev配置开发的时候请求可以带上cookie信息打包出来部署在服务器上请求就没带上cookie信息. 然后自己慢慢排查,联合后端同事,排查这个cookie问题,前端也配置了 axios.defaults.withCredent
关于SpringBoot与Vue交互跨域问题解决方案

目录浏览器同源策略一.VUE前端配置代理解决跨域 (1)Vue中让浏览器请求携带cookie (2)vue中配置代理解决跨域第一步,设置统一访问路径第二步.配置跨域代理第三步.测试请求二.springboot后端配置解决跨域 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 浏览器同源策略为什么会出现跨域问题? 首先一个定义一定要了解,就是浏览器的同源策略, 什么是浏览器的同源策略, 简单来说就是浏览器发送请求的协议.域名和端口要和服务器接收请求的协议.域名以及端口一致.
node后端与Vue前端跨域处理方法详解

目录 node.js后端跨域解决方案前端vue项目前端axios请求 node.js后端跨域解决方案先看后端的入口文件: app.js const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors') const expressJWT = require('express-jwt') const app = express(); const

django+vue实现跨域的示例代码

目录

版本

django实现跨域

1. 安装 django-cors-headers 库

2. 修改项目配置文件 项目/settings.py

3. 前端vue使用axios访问后端django提供的数据接口，安装axios

4. 前端vue配置axios插件，修改src/main.js

5. 在XX.vue中跨域请求数据

相关推荐

随机推荐

1. 安装 `django-cors-headers` 库

2. 修改项目配置文件 `项目/settings.py`

3. 前端vue使用`axios`访问后端django提供的数据接口，安装`axios`

4. 前端vue配置`axios`插件，修改`src/main.js`

5. 在`XX.vue`中跨域请求数据