前后端分离django-restframework——解决跨域请求

为什么会出现跨域问题?
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)

什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

比如一个链接:http://www.baidu.com(端口默认是80端口),

如果再来一个链接是这样:http://api.baidu.com,这个就算是跨域了(因为域名不同)

再来一个:https://www.baidu.com,这个也是跨域了(因为协议不同,用的https)

再来一个http://www.baidu.com:8888,这个也算跨域,端口号不同

举个实际的例子:

  • API接口数据部署在baidu.com上;
  • Ajax文件部署在cnblogs.com上,Ajax文件会向API (baidu.com) 发送请求,返回数据;
  • 用户通过bing.com访问cnblogs.com的Ajax文件,请求数据

以上过程就发生了跨域访问。如果直接使用Ajax来请求就会失败,就像Chrome提示的:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

跨域直白点就是,请求协议,域名(IP),端口号,三个其中任何一个不同都算跨域

CORS

CORS(跨域资源共享,Cross-Origin Resource Sharing)是一种跨域访问的机制,可以让Ajax实现跨域访问 

那么如果跨域是什么样的呢?比如,我这里有个restframework项目作为服务器,项目名为drfversion,测试的app名叫testapp,url如下:

view:

启动项目,直接访问这个API接口测试:

在django的templates目录下新建一个test.html,简单的建立了一个vue和axios的项目,作为前端的异步请求,写入以下参数:

点那个谷歌浏览器图标,然后直接谷歌浏览器打开,这里这个功能是pycharm给我们提供的功能,此时这个作为客户端,访问:

里面的这个参数提示就是跨域了,浏览器默认有个同源策略,他检测到这个http://localhost:63342的url与我们后端启动的DRF项目url:http://127.0.0.1:8000/test/不同源,也就是跨域了,所以报错。

再看接口,看其实后端没有错误,已经给我们返回了数据:

所以跨域请求的根本原因是浏览器的同源策略造成的,要解决这个跨域请求就可以在这方面研究了

而跨域分简单请求和复杂请求

简单请求

HTTP方法是只能是HEAD, GET和POST

HTTP头信息不超出以下几种字段:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type

而且Content-Type只能是下列类型:

  • application/x-www-from-urlencoded
  • multipart/form-d
### 使用 Django 和 Vue.js 实现前后端分离的项目结构及配置 #### 一、项目结构概述 在一个典型的基于Django和Vue.js的前后端分离架构中,前端部分主要负责用户界面展示以及与用户的交互逻辑;而后端则专注于业务逻辑处理和服务接口提供。对于WebStorm环境下开发而言,其强大的集成能力可以很好地支持这种分层式的应用构建。 - **前端(Vue.js)** - `src` 文件夹下包含了整个单页应用程序的核心要素[^4]。 - `assets`: 存储静态资源文件,比如图片、样式表等; - `components`: 组件化管理UI模块的位置; - `router`: 定义客户端侧路由规则的地方; - `App.vue`: 应用程序的主要容器组件; - `main.js`: 初始化并启动Vue实例的关键脚本。 - **后端(Django)** - RESTful API 接口通过DRF框架来创建,以便于向前端暴露数据服务接口[^1]。 #### 二、具体实施步骤说明 ##### (一)、初始化工作区 确保安装了Node.js版本不低于v14.15.1以及Python解释器至少为3.7版,并且已经设置了相应的IDE——即PyCharm用于编写服务器代码而WebStorm用来编辑前端源码。 ##### (二)、设置虚拟环境与依赖包安装 为了保持项目的独立性和可移植性,在开始编码之前应该先建立一个新的Python虚拟环境,并利用pip工具获取必要的第三方库,如Django及其扩展插件rest_framework等。与此同时,还需借助npm/yarn命令行工具下载前端所需的各类NPM包,例如vue-cli-service@latest作为CLI核心功能的一部分[^2]。 ##### (三)、API设计与实现 依据REST原则规划好URL路径映射关系之后就可以着手定义视图函数或者类视图了。这里推荐采用ViewSet的方式简化操作流程,从而减少重复性的样板代码量。另外值得注意的是要记得开启CORS资源共享机制以允许来自不同名下的请求访问本地的服务端点。 ##### (四)、前端工程化建设 运用官方提供的脚手架工具(@vue/cli)快速建立起基础模板项目结构,随后按照实际需求调整webpack配置项使得能够顺利打包编译Sass/Less预处理器语法或是TypeScript类型的JavaScript增强特性。最后一步就是把生产模式下生成好的dist目录部署到任意HTTP(S)服务器上供浏览器加载解析即可完成全部准备工作。 ```bash # 创建新的Django项目 django-admin startproject backend . # 进入项目根目录并激活venv source venv/bin/activate # Linux/MacOS .\venv\Scripts\Activate.ps1 # Windows PowerShell # 安装所需Python包 pip install djangorestframework corsheaders pymysql # 构建Vue应用 vue create frontend cd frontend npm run serve ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小蜜蜂vs码农

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值